@via-profit/ui-kit 0.2.6 → 0.3.0

package/Popper/usePopper.js

@@ -44,10 +44,9 @@ const findScrollableAncestor = (element, includeHidden = false) => {
     return window;
 };
 exports.findScrollableAncestor = findScrollableAncestor;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.default.useLayoutEffect : react_1.default.useEffect;
 const usePopper = (props) => {
     const { anchorElement, anchorPos = 'auto', positionStrategy = 'fixed', autoFlip = false, offset = 0, viewportMargin = 10, isOpen = false, alternativePlacements, } = props;
-    const isMountedRef = react_1.default.useRef(false);
-    const isPositioningRef = react_1.default.useRef(false);
     const [actualPlacement, setActualPlacement] = react_1.default.useState(anchorPos);
     const [style, setStyle] = react_1.default.useState(null);
     const [isVisible, setIsVisible] = react_1.default.useState(false);
@@ -59,12 +58,15 @@ const usePopper = (props) => {
         }
         return (0, exports.findScrollableAncestor)(anchorElement);
     }, [anchorElement]);
-    // Synchronizing actualPlacement with anchorPos
+    // Reset actualPlacement only when the preferred placement itself changes.
+    // Comparing with actualPlacement here would immediately revert every flip.
+    const prevAnchorPosRef = react_1.default.useRef(anchorPos);
     react_1.default.useEffect(() => {
-        if (actualPlacement !== anchorPos) {
+        if (prevAnchorPosRef.current !== anchorPos) {
+            prevAnchorPosRef.current = anchorPos;
             setActualPlacement(anchorPos);
         }
-    }, [actualPlacement, anchorPos]);
+    }, [anchorPos]);
     const getPositionStyle = react_1.default.useCallback((props) => {
         var _a;
         const { place, anchorRect, popperRect, forViewportCheck = false } = props;
@@ -383,25 +385,56 @@ const usePopper = (props) => {
         }
         const anchorRect = anchorElement.getBoundingClientRect();
         const popperRect = popperRef.current.getBoundingClientRect();
-        const { style, placement, found } = getPreferredPlacements(anchorPos, anchorRect, popperRect);
-        if (found) {
-            setActualPlacement(placement);
-        }
+        const { style, placement } = getPreferredPlacements(anchorPos, anchorRect, popperRect);
+        setActualPlacement(placement);
         setStyle(style);
     }, [anchorElement, anchorPos, getPreferredPlacements]);
+    const frameRef = react_1.default.useRef(null);
+    const scheduleUpdate = react_1.default.useCallback(() => {
+        if (frameRef.current !== null) {
+            return;
+        }
+        frameRef.current = window.requestAnimationFrame(() => {
+            frameRef.current = null;
+            calculatePosition();
+        });
+    }, [calculatePosition]);
+    // Cancel the pending frame on unmount
+    react_1.default.useEffect(() => () => {
+        if (frameRef.current !== null) {
+            window.cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+    }, []);
     /**
-     * Open / Close popper logic
+     * Close popper logic
      */
     react_1.default.useEffect(() => {
         if (!isOpen) {
             setIsVisible(false);
             setStyle(null);
         }
-        else if (anchorElement && isOpen && popperRef.current) {
+    }, [isOpen]);
+    /**
+     * Open popper logic.
+     * Runs after every render because the popper node can appear later than `isOpen`
+     * becomes true (e.g. the portal is rendered only after the client mount)
+     */
+    useIsomorphicLayoutEffect(() => {
+        if (isOpen && !isVisible && anchorElement && popperRef.current) {
             calculatePosition();
             setIsVisible(true);
         }
-    }, [anchorElement, getPreferredPlacements, isOpen, calculatePosition]);
+    });
+    /**
+     * Recalculate position when the positioning params are changed
+     */
+    react_1.default.useEffect(() => {
+        if (isOpen && isVisible) {
+            calculatePosition();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [calculatePosition]);
     /**
      * The anchor element changes
      */
@@ -409,12 +442,7 @@ const usePopper = (props) => {
         if (!isOpen || !anchorElement) {
             return;
         }
-        const observer = new MutationObserver(() => {
-            window.requestAnimationFrame(() => {
-                // console.log('The anchor element was change');
-                calculatePosition();
-            });
-        });
+        const observer = new MutationObserver(scheduleUpdate);
         observer.observe(anchorElement, {
             attributes: true,
             childList: true,
@@ -424,36 +452,47 @@ const usePopper = (props) => {
         return () => {
             observer.disconnect();
         };
-    }, [isOpen, anchorElement, calculatePosition]);
+    }, [isOpen, anchorElement, scheduleUpdate]);
     /**
-     * On scroll - recalculate position
+     * The size of the anchor or popper changes
      */
     react_1.default.useEffect(() => {
-        if (!isOpen || !scrollableAncestor) {
+        if (!isOpen || !isVisible || typeof ResizeObserver === 'undefined') {
             return;
         }
-        const handleScroll = () => {
-            window.requestAnimationFrame(() => {
-                calculatePosition();
-            });
-        };
-        // parent scroll listener
-        if (scrollableAncestor instanceof HTMLElement) {
-            scrollableAncestor.addEventListener('scroll', handleScroll, { passive: true });
+        const observer = new ResizeObserver(scheduleUpdate);
+        if (anchorElement) {
+            observer.observe(anchorElement);
         }
-        else if (scrollableAncestor === window) {
-            window.addEventListener('scroll', handleScroll, { passive: true });
+        if (popperRef.current) {
+            observer.observe(popperRef.current);
         }
         // eslint-disable-next-line consistent-return
         return () => {
-            if (scrollableAncestor instanceof HTMLElement) {
-                scrollableAncestor.removeEventListener('scroll', handleScroll);
-            }
-            else if (scrollableAncestor === window) {
-                window.removeEventListener('scroll', handleScroll);
+            observer.disconnect();
+        };
+    }, [isOpen, isVisible, anchorElement, scheduleUpdate]);
+    /**
+     * On scroll of any ancestor (captured on window) - recalculate position
+     */
+    react_1.default.useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const handleScroll = (event) => {
+            var _a;
+            // Scrolling inside the popper does not move it
+            if (event.target instanceof Node && ((_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                return;
             }
+            scheduleUpdate();
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true, capture: true });
+        // eslint-disable-next-line consistent-return
+        return () => {
+            window.removeEventListener('scroll', handleScroll, { capture: true });
         };
-    }, [isOpen, scrollableAncestor, calculatePosition]);
+    }, [isOpen, scheduleUpdate]);
     /**
      * On window resize - recalculate position
      */
@@ -461,18 +500,12 @@ const usePopper = (props) => {
         if (!isOpen) {
             return;
         }
-        const handleResize = () => {
-            window.requestAnimationFrame(() => {
-                calculatePosition();
-            });
-        };
-        // parent scroll listener
-        window.addEventListener('resize', handleResize);
+        window.addEventListener('resize', scheduleUpdate);
         // eslint-disable-next-line consistent-return
         return () => {
-            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('resize', scheduleUpdate);
         };
-    }, [calculatePosition, isOpen]);
+    }, [scheduleUpdate, isOpen]);
     return {
         actualPlacement,
         style,

package/Selectbox/SelectboxMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MenuProps, MenuRef } from '../Menu';
-import { OnChange } from 'Selectbox';
+import type { OnChange } from './index';
 export interface SelectbosMenuProps<T, Multiple extends boolean | undefined = undefined> extends MenuProps<T, Multiple> {
     readonly onChange?: OnChange<T, Multiple>;
 }

package/Selectbox/index.js

@@ -60,31 +60,14 @@ const DEFAULT_OVERRIDES = {
     ButtonWrapper: SelectboxButtonWrapper_1.default,
     Container: SelectboxContainer_1.default,
 };
-const generateGuid = () => {
-    const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
-    return [
-        u.substring(0, 8),
-        u.substring(8, 12),
-        '4000-8' + u.substring(13, 16),
-        u.substring(16, 28),
-    ].join('-');
-};
 const Selectbox = React.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, onFocus, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "onFocus", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
     const menuRef = React.useRef(null);
     const [anchorElement, setAnchorElement] = React.useState(null);
     const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, DEFAULT_OVERRIDES), overrides)), [overrides]);
-    const inputID = React.useMemo(() => {
-        if (typeof id === 'string') {
-            return id;
-        }
-        return generateGuid();
-    }, [id]);
-    React.useEffect(() => {
-        if (isOpen && menuRef.current) {
-            menuRef.current.scrollToFirstSelected();
-        }
-    }, [isOpen]);
+    // useId is stable between server and client renders
+    const generatedID = React.useId();
+    const inputID = typeof id === 'string' ? id : generatedID;
     const renderValueAsString = React.useCallback(() => {
         if ((!multiple && !value) || (multiple && value.length === 0)) {
             return notSetLabel;
@@ -128,11 +111,15 @@ const Selectbox = React.forwardRef((props, ref) => {
         }
     }, [onRequestClose, anchorElement]);
     React.useEffect(() => {
+        // A closed selectbox has nothing to close
+        if (!isOpen) {
+            return undefined;
+        }
         window.document.addEventListener(ClickOutside_1.mouseEventMap.onMouseDown, handleMouseDown);
         return () => {
             window.document.removeEventListener(ClickOutside_1.mouseEventMap.onMouseDown, handleMouseDown);
         };
-    }, [handleMouseDown]);
+    }, [handleMouseDown, isOpen]);
     const buttonProps = React.useMemo(() => (Object.assign({ fullWidth,
         error,
         isOpen,
@@ -141,15 +128,12 @@ const Selectbox = React.forwardRef((props, ref) => {
         htmlFor: inputID,
         error,
     }), [inputID, error]);
-    if (!(items === null || items === void 0 ? void 0 : items.length) && !isLoading) {
-        return null;
-    }
     return (React.createElement(overridesMap.Container, null,
         label != null && (React.createElement(overridesMap.Label, Object.assign({}, labelProps),
             label,
-            requiredAsterisk != null && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+            requiredAsterisk != null && requiredAsterisk !== false && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
         React.createElement(overridesMap.ButtonWrapper, { fullWidth: fullWidth, error: error, isOpen: isOpen },
-            React.createElement(overridesMap.Button, Object.assign({}, buttonProps, { onClick: handleButtonClick, ref: setRefs }), renderValueAsString())),
+            React.createElement(overridesMap.Button, Object.assign({}, buttonProps, { id: inputID, onClick: handleButtonClick, ref: setRefs }), renderValueAsString())),
         React.createElement(overridesMap.ErrorText, { error: error }, errorText),
         React.createElement(SelectboxMenu_1.default, { multiple: multiple, items: items, value: value, isOpen: isOpen, anchorPos: anchorPos, positionStrategy: positionStrategy, autoFlip: autoFlip, alternativePlacements: ['bottom-fill', 'top-fill'], anchorElement: anchorElement, getOptionSelected: getOptionSelected, onChange: onChange, onRequestClose: onRequestClose, ref: menuRef }, children)));
 });

package/Swiper/Swiper.js

@@ -106,7 +106,6 @@ exports.Swiper = React.forwardRef((props, ref) => {
     const isAnimating = React.useRef(false);
     const autoplayTimer = React.useRef();
     const mounted = React.useRef(true);
-    const normalizeTimeout = React.useRef();
     // #region Real Index
     const realIndex = React.useMemo(() => {
         if (!infinite) {
@@ -167,7 +166,9 @@ exports.Swiper = React.forwardRef((props, ref) => {
         indexRef.current = index;
     }, [index]);
     const goToIndex = React.useCallback((i) => {
-        if (isAnimating.current)
+        // In the infinite mode the index is normalized after the transition, so wait for it.
+        // In the regular mode the transition is simply retargeted
+        if (infinite && isAnimating.current)
             return;
         let targetIndex = i;
         if (infinite) {
@@ -278,11 +279,13 @@ exports.Swiper = React.forwardRef((props, ref) => {
         else {
             setIndex(nextIndex);
         }
-        isAnimating.current = true;
+        // A click without movement does not start a transition, so transitionend never comes
+        // and the flag would block autoplay and goToIndex forever
+        isAnimating.current = nextIndex !== index || (snap && offset !== 0);
         dragging.current = false;
         setIsDragging(false);
         e.target.releasePointerCapture(e.pointerId);
-    }, [threshold, dragThreshold, index, maxIndex, snap, infinite, total]);
+    }, [threshold, dragThreshold, index, maxIndex, snap, infinite, total, offset]);
     const onLostPointerCapture = React.useCallback((e) => {
         if (dragging.current) {
             onPointerUp(e);
@@ -347,8 +350,17 @@ exports.Swiper = React.forwardRef((props, ref) => {
             isAnimating.current = false;
             normalizeIndex(); // <-- вот здесь
         };
+        const handleTransitionCancel = (e) => {
+            if (e.propertyName !== 'transform')
+                return;
+            isAnimating.current = false;
+        };
         track.addEventListener('transitionend', handleTransitionEnd);
-        return () => track.removeEventListener('transitionend', handleTransitionEnd);
+        track.addEventListener('transitioncancel', handleTransitionCancel);
+        return () => {
+            track.removeEventListener('transitionend', handleTransitionEnd);
+            track.removeEventListener('transitioncancel', handleTransitionCancel);
+        };
     }, [normalizeIndex]);
     // #region Mount
     React.useEffect(() => {

package/TextArea/index.js

@@ -48,19 +48,9 @@ const TextAreaIconWrapper_1 = __importDefault(require("./TextAreaIconWrapper"));
 const TextArea = (props, ref) => {
     const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
     const [focused, setFocused] = React.useState(false);
-    const inputID = React.useMemo(() => {
-        if (typeof id === 'string') {
-            return id;
-        }
-        const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
-        const guid = [
-            u.substring(0, 8),
-            u.substring(8, 12),
-            '4000-8' + u.substring(13, 16),
-            u.substring(16, 28),
-        ].join('-');
-        return guid;
-    }, [id]);
+    // useId is stable between server and client renders
+    const generatedID = React.useId();
+    const inputID = typeof id === 'string' ? id : generatedID;
     const inputChange = React.useCallback(event => {
         if (onChange) {
             onChange(event);
@@ -92,7 +82,9 @@ const TextArea = (props, ref) => {
     return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
         typeof label !== 'undefined' && label !== null && (React.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
             label,
-            typeof requiredAsterisk !== 'undefined' && requiredAsterisk !== null && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+            typeof requiredAsterisk !== 'undefined' &&
+                requiredAsterisk !== null &&
+                requiredAsterisk !== false && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
         React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth },
             hasStartIcon && (React.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
             React.createElement(overridesMap.Input, Object.assign({}, nativeInputProps, { hasStartIcon: hasStartIcon, hasEndIcon: hasEndIcon, ref: inputRef, id: inputID, onChange: inputChange, onFocus: inputFocus, onBlur: inputBlur })),

package/TextField/index.js

@@ -67,26 +67,14 @@ const defailtOverrides = {
 const TextField = React.forwardRef((props, ref) => {
     const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
     const [focused, setFocused] = React.useState(false);
-    const inputID = React.useMemo(() => {
-        if (typeof id === 'string') {
-            return id;
-        }
-        const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
-        return [
-            u.substring(0, 8),
-            u.substring(8, 12),
-            '4000-8' + u.substring(13, 16),
-            u.substring(16, 28),
-        ].join('-');
-    }, [id]);
-    const stableOnChange = React.useCallback(onChange ? onChange : () => undefined, [onChange]); // уже есть
-    // const stableOnFocus = React.useCallback(onFocus, [onFocus]); // уже есть
-    // const stableOnBlur = React.useCallback(onBlur, [onBlur]); // уже есть
+    // useId is stable between server and client renders
+    const generatedID = React.useId();
+    const inputID = typeof id === 'string' ? id : generatedID;
     const inputChange = React.useCallback(event => {
-        if (stableOnChange) {
-            stableOnChange(event);
+        if (typeof onChange === 'function') {
+            onChange(event);
         }
-    }, [stableOnChange]);
+    }, [onChange]);
     const inputFocus = React.useCallback(event => {
         setFocused(true);
         if (typeof onFocus === 'function') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "description": "UI Kit",
   "repository": {
     "type": "git",

package/utils/TabManager.d.ts

@@ -25,7 +25,7 @@
  *     window.document.addEventListener('keydown', keydown);
  *
  *      return () => {
- *         window.document.addEventListener('keydown', keydown);
+ *         window.document.removeEventListener('keydown', keydown);
  *      }
  *   }, []);
  *
@@ -51,6 +51,12 @@ declare class TabManager {
     registerContainer(container: HTMLElement): void;
     unregisterContainer(container: HTMLElement, revertBackFocus?: boolean): void;
     getElementsList(): HTMLElement[];
+    /**
+     * Index of the currently focused element in the list.
+     * Uses the real focus, so a focus set by mouse is taken into account
+     */
+    getCurrentIndex(list: readonly HTMLElement[]): number;
+    focusByIndex(list: readonly HTMLElement[], index: number): void;
     focusNext(): void;
     focusPrev(): void;
 }

package/utils/TabManager.js

@@ -39,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
  *     window.document.addEventListener('keydown', keydown);
  *
  *      return () => {
- *         window.document.addEventListener('keydown', keydown);
+ *         window.document.removeEventListener('keydown', keydown);
  *      }
  *   }, []);
  *
@@ -78,7 +78,6 @@ 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) {
-                console.debug('revert back focus to', stackElem.lastFocused);
                 stackElem.lastFocused.focus();
             }
             return !founded;
@@ -86,60 +85,55 @@ class TabManager {
     }
     getElementsList() {
         const { stackElement } = this.getTopOfTheStack();
-        const universe = stackElement.container.querySelectorAll('input, button, select, textarea, a[href]');
-        const list = Array.prototype.filter.call(universe, function (item) {
-            return item.tabIndex >= 0;
-        });
-        list.sort((a, b) => {
-            if (a.tabIndex === 0) {
-                return 1;
-            }
-            if (b.tabIndex === 0) {
-                return -1;
-            }
-            if (a.tabIndex < b.tabIndex) {
-                return -1;
-            }
-            if (a.tabIndex > b.tabIndex) {
-                return 1;
-            }
-            return 0;
-        });
+        if (!stackElement) {
+            return [];
+        }
+        const universe = stackElement.container.querySelectorAll('input, button, select, textarea, a[href], [tabindex]');
+        const list = Array.prototype.filter.call(universe, (item) => item.tabIndex >= 0 &&
+            !item.disabled &&
+            item !== stackElement.container);
+        // Positive tabIndex goes first (ascending), then tabIndex=0 in the DOM order.
+        // Array.prototype.sort is stable, so equal keys keep the DOM order
+        const sortKey = (el) => el.tabIndex === 0 ? Number.MAX_SAFE_INTEGER : el.tabIndex;
+        list.sort((a, b) => sortKey(a) - sortKey(b));
         return list;
     }
-    focusNext() {
-        const { stackElement, stackIndex } = this.getTopOfTheStack();
-        const list = this.getElementsList();
-        const nextIndex = stackElement.lastIndex + 1;
-        if (list[nextIndex]) {
-            list[nextIndex].focus();
-            __classPrivateFieldGet(this, _TabManager_stack, "f")[stackIndex].lastIndex = nextIndex;
-            return;
+    /**
+     * Index of the currently focused element in the list.
+     * Uses the real focus, so a focus set by mouse is taken into account
+     */
+    getCurrentIndex(list) {
+        const { stackElement } = this.getTopOfTheStack();
+        const activeIndex = list.findIndex(el => el === document.activeElement);
+        if (activeIndex !== -1) {
+            return activeIndex;
         }
-        // Othrwise
-        const nextEl = list[0];
-        if (nextEl) {
-            __classPrivateFieldGet(this, _TabManager_stack, "f")[stackIndex].lastIndex = 0;
-            nextEl.focus();
+        return stackElement ? stackElement.lastIndex : -1;
+    }
+    focusByIndex(list, index) {
+        const { stackElement } = this.getTopOfTheStack();
+        const el = list[index];
+        if (!stackElement || !el) {
             return;
         }
+        stackElement.lastIndex = index;
+        el.focus();
     }
-    focusPrev() {
-        const { stackElement, stackIndex } = this.getTopOfTheStack();
+    focusNext() {
         const list = this.getElementsList();
-        const nextIndex = stackElement.lastIndex - 1;
-        if (list[nextIndex]) {
-            list[nextIndex].focus();
-            __classPrivateFieldGet(this, _TabManager_stack, "f")[stackIndex].lastIndex = nextIndex;
+        if (list.length === 0) {
             return;
         }
-        // Othrwise
-        const nextEl = list[list.length - 1];
-        if (nextEl) {
-            __classPrivateFieldGet(this, _TabManager_stack, "f")[stackIndex].lastIndex = list.length - 1;
-            nextEl.focus();
+        const nextIndex = this.getCurrentIndex(list) + 1;
+        this.focusByIndex(list, nextIndex < list.length ? nextIndex : 0);
+    }
+    focusPrev() {
+        const list = this.getElementsList();
+        if (list.length === 0) {
             return;
         }
+        const prevIndex = this.getCurrentIndex(list) - 1;
+        this.focusByIndex(list, prevIndex >= 0 ? prevIndex : list.length - 1);
     }
 }
 _TabManager_stack = new WeakMap();