@rescui/tab-list 0.13.3 → 0.13.5

package/lib/parts/use-scrollable-list.js

@@ -1,53 +1,37 @@
-import "core-js/modules/web.dom-collections.for-each.js";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["child", "itemId", "childValue", "ref"],
-    _excluded2 = ["value", "onFocus"];
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.promise.js";
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useRef, useState, useCallback, useMemo, useEffect, cloneElement } from 'react';
-import { deepMap } from './deep-map.js';
-import { useResizeObserver } from './use-resize-observer.js'; // arrow (32) + shadow (10) + shadow blur (~8) + item focus outline (4)
+import { useResizeObserver } from '@rescui/use-resize-observer';
+import { deepMap } from './deep-map.js'; // arrow (32) + shadow (10) + shadow blur (~8) + item focus outline (4)
 
-var ARROW_AREA_WIDTH_IN_PX = 54;
+const ARROW_AREA_WIDTH_IN_PX = 54;
 
 function patchItemIfNeeded(_ref) {
-  var child = _ref.child,
-      itemId = _ref.itemId,
-      childValue = _ref.childValue,
-      ref = _ref.ref,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/cloneElement(child, _objectSpread({
-    itemId: itemId,
+  let {
+    child,
+    itemId,
+    childValue,
+    ref,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/cloneElement(child, {
+    itemId,
     value: childValue,
-    ref: ref
-  }, restProps));
+    ref,
+    ...restProps
+  });
 }
 
 function calculateArrowsVisibility(scrollContainerEl) {
   // doing this because scrollContainerEl.scrollWidth returns a rounded value
-  var scrollLeft = Math.round(scrollContainerEl.scrollLeft);
-  var shouldShowAnyArrow = scrollContainerEl.offsetWidth < scrollContainerEl.scrollWidth; // in some browsers, fully scrolled element has `scrollLeft + offsetWidth === scrollWidth - 1`
+  const scrollLeft = Math.round(scrollContainerEl.scrollLeft);
+  const shouldShowAnyArrow = scrollContainerEl.offsetWidth < scrollContainerEl.scrollWidth; // in some browsers, fully scrolled element has `scrollLeft + offsetWidth === scrollWidth - 1`
   // so we take this measurement error into account
 
-  var delta = 1;
-  var showLeftArrow = shouldShowAnyArrow && scrollLeft > 0;
-  var showRightArrow = shouldShowAnyArrow && scrollLeft + scrollContainerEl.offsetWidth < scrollContainerEl.scrollWidth - delta;
+  const delta = 1;
+  const showLeftArrow = shouldShowAnyArrow && scrollLeft > 0;
+  const showRightArrow = shouldShowAnyArrow && scrollLeft + scrollContainerEl.offsetWidth < scrollContainerEl.scrollWidth - delta;
   return {
-    showLeftArrow: showLeftArrow,
-    showRightArrow: showRightArrow
+    showLeftArrow,
+    showRightArrow
   };
 }
 
@@ -76,30 +60,30 @@ function scrollElementLeft(element, to) {
 }
 
 function scrollIntoView(activeNode, parentNode) {
-  var childWidth = activeNode.offsetWidth;
-  var parentWidth = parentNode.offsetWidth;
-  var parentStyles = getComputedStyle(parentNode);
-  var parentMarginsOffset = parseInt(parentStyles.marginLeft, 10) + parseInt(parentStyles.marginRight, 10);
-  var parentScrollLeft = parentNode.scrollLeft;
-  var parentScrollWidth = parentNode.scrollWidth; // position of the left border in the container
+  const childWidth = activeNode.offsetWidth;
+  const parentWidth = parentNode.offsetWidth;
+  const parentStyles = getComputedStyle(parentNode);
+  const parentMarginsOffset = parseInt(parentStyles.marginLeft, 10) + parseInt(parentStyles.marginRight, 10);
+  const parentScrollLeft = parentNode.scrollLeft;
+  const parentScrollWidth = parentNode.scrollWidth; // position of the left border in the container
 
-  var activeNodeLeft = parentNode.offsetLeft + activeNode.offsetLeft; // position of the right border in the container
+  const activeNodeLeft = parentNode.offsetLeft + activeNode.offsetLeft; // position of the right border in the container
 
-  var activeNodeRight = activeNodeLeft + childWidth; // position of the left border in relation to the viewport
+  const activeNodeRight = activeNodeLeft + childWidth; // position of the left border in relation to the viewport
 
-  var activeNodeLeftOffset = activeNodeLeft - parentScrollLeft; // position of the right border in relation to the viewport
+  const activeNodeLeftOffset = activeNodeLeft - parentScrollLeft; // position of the right border in relation to the viewport
 
-  var activeNodeRightOffset = parentWidth - (activeNodeLeftOffset + childWidth); // by default, don't scroll at all
+  const activeNodeRightOffset = parentWidth - (activeNodeLeftOffset + childWidth); // by default, don't scroll at all
 
-  var scrollTo = -1; // if before the element there is a space larger than arrow area
+  let scrollTo = -1; // if before the element there is a space larger than arrow area
 
-  var isElHasWorkSpaceLeft = activeNodeLeft > ARROW_AREA_WIDTH_IN_PX; // if after the element there is a space larger than arrow area
+  const isElHasWorkSpaceLeft = activeNodeLeft > ARROW_AREA_WIDTH_IN_PX; // if after the element there is a space larger than arrow area
 
-  var isElHasWorkSpaceRight = activeNodeRight < parentScrollWidth - ARROW_AREA_WIDTH_IN_PX;
+  const isElHasWorkSpaceRight = activeNodeRight < parentScrollWidth - ARROW_AREA_WIDTH_IN_PX;
 
   if (activeNodeRightOffset <= ARROW_AREA_WIDTH_IN_PX) {
     if (isElHasWorkSpaceRight) {
-      var sideOffset = parentWidth - childWidth + parentMarginsOffset;
+      const sideOffset = parentWidth - childWidth + parentMarginsOffset;
       scrollTo = activeNodeLeft + ARROW_AREA_WIDTH_IN_PX - sideOffset;
     } else {
       scrollTo = parentScrollWidth - parentWidth; // right edge
@@ -120,67 +104,60 @@ function scrollIntoView(activeNode, parentNode) {
   }
 }
 
-var useScrollableList = function useScrollableList(_ref2) {
-  var children = _ref2.children,
-      compareValues = _ref2.compareValues,
-      value = _ref2.value,
-      CompareItem = _ref2.CompareItem;
-  var activeNodeRef = useRef(null);
-  var scrollableRef = useRef(null);
-  var containerRef = useRef(null); // reset targeted element on scrolling by arrows
+const useScrollableList = _ref2 => {
+  let {
+    children,
+    compareValues,
+    value,
+    CompareItem
+  } = _ref2;
+  const activeNodeRef = useRef(null);
+  const scrollableRef = useRef(null);
+  const containerRef = useRef(null); // reset targeted element on scrolling by arrows
   // so on window resize there wouldn't scroll to it
 
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      targetedEl = _useState2[0],
-      setTargetedEl = _useState2[1];
-
-  var _useState3 = useState({
+  const [targetedEl, setTargetedEl] = useState(null);
+  const [{
+    showLeftArrow,
+    showRightArrow
+  }, setShowArrows] = useState({
     showLeftArrow: false,
     showRightArrow: false
-  }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      _useState4$ = _useState4[0],
-      showLeftArrow = _useState4$.showLeftArrow,
-      showRightArrow = _useState4$.showRightArrow,
-      setShowArrows = _useState4[1];
-
-  var _onFocus = useCallback(function (e) {
+  });
+  const onFocus = useCallback(e => {
     setTargetedEl(e.target);
   }, []);
-
-  var _useMemo = useMemo(function () {
-    var counter = 0;
-    var currentSelectedItemId = null;
-    var items = deepMap(children, function (child) {
+  const [childrenWithValues, selectedId] = useMemo(() => {
+    let counter = 0;
+    let currentSelectedItemId = null;
+    const items = deepMap(children, child => {
       if (child.type === CompareItem) {
-        var _child$props = child.props,
-            _child$props$value = _child$props.value,
-            childValue = _child$props$value === void 0 ? counter : _child$props$value,
-            onFocusFromProps = _child$props.onFocus,
-            restProps = _objectWithoutProperties(_child$props, _excluded2);
-
-        var hasAlreadySelectedItem = currentSelectedItemId === null;
-        var isSelectedItem = hasAlreadySelectedItem && compareValues(value, childValue);
+        const {
+          value: childValue = counter,
+          onFocus: onFocusFromProps,
+          ...restProps
+        } = child.props;
+        const hasAlreadySelectedItem = currentSelectedItemId === null;
+        const isSelectedItem = hasAlreadySelectedItem && compareValues(value, childValue);
 
         if (isSelectedItem) {
           currentSelectedItemId = counter;
         }
 
-        var patchedItem = patchItemIfNeeded(_objectSpread(_objectSpread({
-          child: child,
+        const patchedItem = patchItemIfNeeded({
+          child,
           itemId: counter,
-          childValue: childValue
-        }, restProps), {}, {
-          onFocus: function onFocus(e) {
+          childValue,
+          ...restProps,
+          onFocus: e => {
             if (onFocusFromProps) {
               onFocusFromProps(e);
             }
 
-            _onFocus(e);
+            onFocus(e);
           },
           ref: isSelectedItem ? activeNodeRef : null
-        }));
+        });
         counter += 1;
         return patchedItem;
       } else {
@@ -188,36 +165,47 @@ var useScrollableList = function useScrollableList(_ref2) {
       }
     });
     return [React.Children.toArray(items), currentSelectedItemId];
-  }, [children, value, compareValues, _onFocus, CompareItem]),
-      _useMemo2 = _slicedToArray(_useMemo, 2),
-      childrenWithValues = _useMemo2[0],
-      selectedId = _useMemo2[1];
-
-  var prepareDirectionScroller = function prepareDirectionScroller(direction) {
-    return function () {
-      var current = scrollableRef.current;
-      var left = Math.max(current.clientWidth - 2 * ARROW_AREA_WIDTH_IN_PX, 30) * (direction === 'right' ? 1 : -1);
-      setTargetedEl(null);
-      scrollElementBy(current, left);
-    };
+  }, [children, value, compareValues, onFocus, CompareItem]);
+
+  const prepareDirectionScroller = direction => () => {
+    const {
+      current
+    } = scrollableRef;
+    const left = Math.max(current.clientWidth - 2 * ARROW_AREA_WIDTH_IN_PX, 30) * (direction === 'right' ? 1 : -1);
+    setTargetedEl(null);
+    scrollElementBy(current, left);
   };
 
-  useEffect(function () {
+  useEffect(() => {
     if (!activeNodeRef.current) {
       return;
     }
 
     setTargetedEl(activeNodeRef.current);
   }, [value, childrenWithValues]);
-  var setArrowsVisibility = useCallback(function () {
+  const setArrowsVisibility = useCallback(() => {
     if (!scrollableRef.current) {
       return;
     }
 
     setShowArrows(calculateArrowsVisibility(scrollableRef.current));
-  }, []);
-  var onPartsResize = useCallback(function () {
-    var scrollableEl = scrollableRef.current;
+  }, []); // update arrows while smooth scrolling
+
+  useEffect(() => {
+    const scrollContainer = scrollableRef.current;
+
+    if (!scrollContainer) {
+      return null;
+    }
+
+    scrollContainer.addEventListener('scroll', setArrowsVisibility, {
+      passive: true
+    });
+    return () => scrollContainer.removeEventListener('scroll', setArrowsVisibility);
+  }, [setArrowsVisibility]); // scrollIntoView active element when it changes or the component resizes
+
+  const updateScrollState = () => {
+    const scrollableEl = scrollableRef.current;
 
     if (!scrollableEl) {
       return;
@@ -228,35 +216,25 @@ var useScrollableList = function useScrollableList(_ref2) {
     }
 
     setArrowsVisibility();
-  }, [targetedEl, setArrowsVisibility]); // update arrows while smooth scrolling
+  }; // look at the containers resizes
 
-  useEffect(function () {
-    var scrollContainer = scrollableRef.current;
 
-    if (!scrollContainer) {
-      return null;
-    }
-
-    scrollContainer.addEventListener('scroll', setArrowsVisibility, {
-      passive: true
-    });
-    return function () {
-      return scrollContainer.removeEventListener('scroll', setArrowsVisibility);
-    };
-  }, [setArrowsVisibility]); // look at the containers resizes
-  // onPartsResize will be called when its updates
-
-  useResizeObserver(containerRef, onPartsResize);
-  useResizeObserver(scrollableRef, onPartsResize);
+  useResizeObserver(containerRef, updateScrollState, {
+    ignoreFirstCall: true
+  });
+  useResizeObserver(scrollableRef, updateScrollState, {
+    ignoreFirstCall: true
+  });
+  useEffect(updateScrollState, [targetedEl, setArrowsVisibility]);
   return {
-    selectedId: selectedId,
-    prepareDirectionScroller: prepareDirectionScroller,
-    activeNodeRef: activeNodeRef,
-    scrollableRef: scrollableRef,
-    containerRef: containerRef,
-    childrenWithValues: childrenWithValues,
-    showLeftArrow: showLeftArrow,
-    showRightArrow: showRightArrow
+    selectedId,
+    prepareDirectionScroller,
+    activeNodeRef,
+    scrollableRef,
+    containerRef,
+    childrenWithValues,
+    showLeftArrow,
+    showRightArrow
   };
 };
 

package/lib/parts/with-scroll-arrows.js

@@ -1,19 +1,3 @@
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["compareValues", "value", "onChange", "children", "theme", "data-e2e"];
-import "core-js/modules/es.function.name.js";
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import cn from 'classnames';
 import { Button } from '@rescui/button';
@@ -23,41 +7,38 @@ import RightIcon from '../_virtual/right.js';
 import { useScrollableList } from './use-scrollable-list.js';
 import styles from './with-scroll-arrows.p.module.css.js';
 
-var compareTabsDefault = function compareTabsDefault(activeValue, tabValue) {
-  return activeValue === tabValue;
-};
-
-var withScrollArrows = function withScrollArrows(WrappedComponent, CompareItem) {
-  var arrowHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '100%';
-
-  var WithScrollArrowsComponent = function WithScrollArrowsComponent(_ref) {
-    var _ref$compareValues = _ref.compareValues,
-        compareValues = _ref$compareValues === void 0 ? compareTabsDefault : _ref$compareValues,
-        value = _ref.value,
-        onChange = _ref.onChange,
-        children = _ref.children,
-        themeFromProps = _ref.theme,
-        e2eId = _ref['data-e2e'],
-        restProps = _objectWithoutProperties(_ref, _excluded);
+const compareTabsDefault = (activeValue, tabValue) => activeValue === tabValue;
 
-    var theme = useThemeWithUndefined(themeFromProps);
-
-    var _useScrollableList = useScrollableList({
-      children: children,
-      compareValues: compareValues,
-      value: value,
-      CompareItem: CompareItem
-    }),
-        selectedId = _useScrollableList.selectedId,
-        prepareDirectionScroller = _useScrollableList.prepareDirectionScroller,
-        activeNodeRef = _useScrollableList.activeNodeRef,
-        scrollableRef = _useScrollableList.scrollableRef,
-        containerRef = _useScrollableList.containerRef,
-        childrenWithValues = _useScrollableList.childrenWithValues,
-        showLeftArrow = _useScrollableList.showLeftArrow,
-        showRightArrow = _useScrollableList.showRightArrow;
+const withScrollArrows = function (WrappedComponent, CompareItem) {
+  let arrowHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '100%';
 
-    var arrowStyles = {
+  const WithScrollArrowsComponent = _ref => {
+    let {
+      compareValues = compareTabsDefault,
+      value,
+      onChange,
+      children,
+      theme: themeFromProps,
+      ['data-e2e']: e2eId,
+      ...restProps
+    } = _ref;
+    const theme = useThemeWithUndefined(themeFromProps);
+    const {
+      selectedId,
+      prepareDirectionScroller,
+      activeNodeRef,
+      scrollableRef,
+      containerRef,
+      childrenWithValues,
+      showLeftArrow,
+      showRightArrow
+    } = useScrollableList({
+      children,
+      compareValues,
+      value,
+      CompareItem
+    });
+    const arrowStyles = {
       height: arrowHeight
     };
     return /*#__PURE__*/React.createElement("div", {
@@ -74,21 +55,22 @@ var withScrollArrows = function withScrollArrows(WrappedComponent, CompareItem)
       onClick: prepareDirectionScroller('left'),
       icon: /*#__PURE__*/React.createElement(LeftIcon, null),
       size: "s",
-      "data-e2e": e2eId ? "".concat(e2eId, "__left-arrow") : null,
+      "data-e2e": e2eId ? `${e2eId}__left-arrow` : null,
       "data-test": 'scrollable-list-arrow-left'
     })), /*#__PURE__*/React.createElement("div", {
       className: cn(styles.scrollable, showLeftArrow && styles.withLeftArrow, showRightArrow && styles.withRightArrow),
       ref: scrollableRef,
       tabIndex: -1
-    }, /*#__PURE__*/React.createElement(WrappedComponent, _objectSpread({
+    }, /*#__PURE__*/React.createElement(WrappedComponent, {
       selectedId: selectedId,
       activeNodeRef: activeNodeRef,
       value: value,
       onChange: onChange,
       theme: theme,
       "data-e2e": e2eId,
-      containerRef: containerRef
-    }, restProps), childrenWithValues)), /*#__PURE__*/React.createElement("div", {
+      containerRef: containerRef,
+      ...restProps
+    }, childrenWithValues)), /*#__PURE__*/React.createElement("div", {
       className: cn(styles.arrow, styles.arrowRight, showRightArrow && styles.shown),
       style: arrowStyles,
       "data-test": 'scrollable-list-arrow-right-wrapper'
@@ -100,12 +82,12 @@ var withScrollArrows = function withScrollArrows(WrappedComponent, CompareItem)
       icon: /*#__PURE__*/React.createElement(RightIcon, null),
       className: styles.arrowButton,
       size: "s",
-      "data-e2e": e2eId ? "".concat(e2eId, "__right-arrow") : null,
+      "data-e2e": e2eId ? `${e2eId}__right-arrow` : null,
       "data-test": 'scrollable-list-arrow-right'
     })));
   };
 
-  WithScrollArrowsComponent.displayName = "withScrollArrows(".concat(WrappedComponent.displayName || WrappedComponent.name, ")");
+  WithScrollArrowsComponent.displayName = `withScrollArrows(${WrappedComponent.displayName || WrappedComponent.name})`;
   return WithScrollArrowsComponent;
 };
 

package/lib/parts/with-scroll-arrows.p.module.css.js

@@ -1,14 +1,14 @@
 var styles = {
-  "light": "_light_1h7x0dd_9",
-  "dark": "_dark_1h7x0dd_12",
-  "wrapper": "_wrapper_1h7x0dd_16",
-  "scrollable": "_scrollable_1h7x0dd_23",
-  "arrow": "_arrow_1h7x0dd_52",
-  "shown": "_shown_1h7x0dd_72",
-  "arrowLeft": "_arrowLeft_1h7x0dd_80",
-  "arrowRight": "_arrowRight_1h7x0dd_85",
-  "withLeftArrow": "_withLeftArrow_1h7x0dd_91",
-  "withRightArrow": "_withRightArrow_1h7x0dd_100",
-  "arrowButton": "_arrowButton_1h7x0dd_121"
+  "light": "_light_awzdsf_9",
+  "dark": "_dark_awzdsf_12",
+  "wrapper": "_wrapper_awzdsf_16",
+  "scrollable": "_scrollable_awzdsf_23",
+  "arrow": "_arrow_awzdsf_52",
+  "shown": "_shown_awzdsf_72",
+  "arrowLeft": "_arrowLeft_awzdsf_80",
+  "arrowRight": "_arrowRight_awzdsf_85",
+  "withLeftArrow": "_withLeftArrow_awzdsf_91",
+  "withRightArrow": "_withRightArrow_awzdsf_100",
+  "arrowButton": "_arrowButton_awzdsf_121"
 };
 export { styles as default };

package/lib/tab-list.js

@@ -6,42 +6,40 @@ import { TabListContext } from './parts/tab-list-context.js';
 import { withScrollArrows } from './parts/with-scroll-arrows.js';
 import { useIndicator } from './parts/use-indicator.js';
 import styles from './parts/tab-list.p.module.css.js';
-var STYLES_SIZES = {
+const STYLES_SIZES = {
   m: styles.sizeM,
   l: styles.sizeL
 };
 
-var InnerTabList = function InnerTabList(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      _ref$sparse = _ref.sparse,
-      sparse = _ref$sparse === void 0 ? false : _ref$sparse,
-      className = _ref.className,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
-      _ref$short = _ref.short,
-      short = _ref$short === void 0 ? false : _ref$short,
-      theme = _ref.theme,
-      value = _ref.value,
-      onChange = _ref.onChange,
-      children = _ref.children,
-      selectedId = _ref.selectedId,
-      activeNodeRef = _ref.activeNodeRef,
-      containerRef = _ref.containerRef,
-      e2eId = _ref['data-e2e'];
-  var indicator = useIndicator({
-    activeNodeRef: activeNodeRef,
-    containerRef: containerRef,
+const InnerTabList = _ref => {
+  let {
+    size = 'm',
+    sparse = false,
+    className,
+    mode = 'classic',
+    short = false,
+    theme,
+    value,
+    onChange,
+    children,
+    selectedId,
+    activeNodeRef,
+    containerRef,
+    ['data-e2e']: e2eId
+  } = _ref;
+  const indicator = useIndicator({
+    activeNodeRef,
+    containerRef,
     triggers: [value, children]
   });
   return /*#__PURE__*/React.createElement(TabListContext.Provider, {
     value: {
-      onChange: onChange,
-      selectedId: selectedId
+      onChange,
+      selectedId
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: cn(styles.tabsContainer, styles[theme], styles[mode], STYLES_SIZES[size], sparse && styles.sparse, short && styles.short, className),
-    "data-e2e": e2eId ? "".concat(e2eId, "__tabs-container") : null,
+    "data-e2e": e2eId ? `${e2eId}__tabs-container` : null,
     "data-test": 'tab-list',
     ref: containerRef
   }, children, /*#__PURE__*/React.createElement("span", {
@@ -51,7 +49,7 @@ var InnerTabList = function InnerTabList(_ref) {
 };
 
 InnerTabList.displayName = 'TabList';
-var TabList = withScrollArrows(InnerTabList, Tab); // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+const TabList = withScrollArrows(InnerTabList, Tab); // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 
 TabList.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/tab-list",
-  "version": "0.13.3",
+  "version": "0.13.5",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -14,11 +14,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.14.0",
-    "@juggle/resize-observer": "3.3.0",
-    "@rescui/button": "^0.18.0",
-    "classnames": "^2.2.6",
-    "core-js": "^3.9.1"
+    "@babel/runtime-corejs3": "^7.26.0",
+    "@rescui/button": "^0.18.1",
+    "@rescui/use-resize-observer": "^0.2.5",
+    "classnames": "^2.2.6"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.5.0",
@@ -26,10 +25,10 @@
     "react": ">=16.8.0 <19"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.2.5",
+    "@rescui/colors": "^0.2.6",
     "@rescui/postcss-preset-library": "^0.2.2",
-    "@rescui/scripts": "^0.3.4",
-    "@rescui/typography": "^0.19.0",
+    "@rescui/scripts": "^0.3.5",
+    "@rescui/typography": "^0.19.1",
     "@rescui/visual-regression": "^0.1.2"
   },
   "scripts": {
@@ -37,5 +36,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "d9e048366cc911a0868bca9bb6974b2b667174a5"
+  "gitHead": "67627f69be3de4b4c6a21244fd7de36e841f01f0"
 }

package/lib/parts/use-resize-observer.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function useResizeObserver(nodeRef: React.MutableRefObject<HTMLElement>, onResize: () => void, deps?: any[]): void;