@via-profit/ui-kit 0.10.0 → 0.11.0

package/esm/HintPopover/index.js

@@ -35,7 +35,7 @@ const HintPopover = props => {
         const onKeyDown = (event) => {
             if (event.key === 'Escape') {
                 setOpen(false);
-                button === null || button === void 0 ? void 0 : button.focus();
+                button === null || button === void 0 ? void 0 : button.focus({ preventScroll: true });
             }
         };
         document.addEventListener('keydown', onKeyDown);

package/esm/Menu/MenuContainer.js

@@ -247,10 +247,11 @@ const MenuContainer = React.forwardRef((props, ref) => {
         if (!isOpen) {
             // The menu is already closed by the parent, so onRequestClose must not be called again
             dispatch(actionSetmenuState({ markedIndex: -1, hoveredIndex: -1 }));
-            // Otherwise the focus is lost together with the unmounted list
+            // Otherwise the focus is lost together with the unmounted list.
+            // Without the scroll: an anchor in a sticky header is scrolled to its place in the document
             if (hasFocusRef.current) {
                 hasFocusRef.current = false;
-                (_a = lastAnchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                (_a = lastAnchorRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
             }
             return;
         }
@@ -265,7 +266,8 @@ const MenuContainer = React.forwardRef((props, ref) => {
             var _a;
             scrollToFirstSelected();
             if (autofocus) {
-                (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                // The list is already placed by the popper: focusing must not scroll the page
+                (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
             }
         }, 15);
     }, [isOpen, autofocus, dispatch, scrollToFirstSelected]);

package/esm/Selectbox/SelectboxMenu.js

@@ -21,7 +21,7 @@ const SelectboxMenu = React.forwardRef((props, ref) => {
             if (onRequestClose) {
                 onRequestClose(evt);
             }
-            anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus();
+            anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus({ preventScroll: true });
         }
     }, [onRequestClose, anchorElement]);
     return (React.createElement(Menu, Object.assign({ ref: ref, offset: 0, anchorPos: anchorPos, multiple: multiple, items: items, value: value, isOpen: isOpen && items.length > 0, autofocus: true, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onSelectItem: handleSelectItem, closeOnSelect: !multiple, onRequestClose: handleRequestClose }, restMenuProps), ({ index, item }, itemProps) => children({ index, item: item }, itemProps)));

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/utils/TabManager.js

@@ -76,7 +76,7 @@ class TabManager {
         __classPrivateFieldSet(this, _TabManager_stack, __classPrivateFieldGet(this, _TabManager_stack, "f").filter(stackElem => {
             const founded = stackElem.container === container;
             if (founded && revertBackFocus && stackElem.lastFocused instanceof HTMLElement) {
-                stackElem.lastFocused.focus();
+                stackElem.lastFocused.focus({ preventScroll: true });
             }
             return !founded;
         }), "f");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.10.0",
+  "version": "0.11.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",

package/utils/TabManager.js

@@ -78,7 +78,7 @@ class TabManager {
         __classPrivateFieldSet(this, _TabManager_stack, __classPrivateFieldGet(this, _TabManager_stack, "f").filter(stackElem => {
             const founded = stackElem.container === container;
             if (founded && revertBackFocus && stackElem.lastFocused instanceof HTMLElement) {
-                stackElem.lastFocused.focus();
+                stackElem.lastFocused.focus({ preventScroll: true });
             }
             return !founded;
         }), "f");