@rescui/tab-list 0.18.4 → 0.19.0

package/lib/tab-list.js

@@ -1,4 +1,6 @@
 "use client";
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
@@ -20,24 +22,91 @@ const STYLES_SIZES = {
 const compareTabsDefault = (activeValue, tabValue) => activeValue === tabValue; // eslint-disable-next-line complexity
 
 
-const TabList = _ref => {
-  let {
-    size = 'm',
-    sparse = false,
-    className,
-    mode = 'classic',
-    short = false,
-    ['data-e2e']: e2eId,
-    compareValues = compareTabsDefault,
-    value,
-    onChange,
-    children,
-    theme: themeFromProps,
-    ...restProps
-  } = _ref;
+const TabList = t0 => {
+  const $ = c(80);
+  let children;
+  let className;
+  let e2eId;
+  let onChange;
+  let restProps;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let themeFromProps;
+  let value;
+
+  if ($[0] !== t0) {
+    ({
+      size: t1,
+      sparse: t2,
+      className,
+      mode: t3,
+      short: t4,
+      "data-e2e": e2eId,
+      compareValues: t5,
+      value,
+      onChange,
+      children,
+      theme: themeFromProps,
+      ...restProps
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = e2eId;
+    $[4] = onChange;
+    $[5] = restProps;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = themeFromProps;
+    $[12] = value;
+  } else {
+    children = $[1];
+    className = $[2];
+    e2eId = $[3];
+    onChange = $[4];
+    restProps = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+    t4 = $[9];
+    t5 = $[10];
+    themeFromProps = $[11];
+    value = $[12];
+  }
+
+  const size = t1 === undefined ? "m" : t1;
+  const sparse = t2 === undefined ? false : t2;
+  const mode = t3 === undefined ? "classic" : t3;
+  const short = t4 === undefined ? false : t4;
+  const compareValues = t5 === undefined ? compareTabsDefault : t5;
   const scrollableRef = useRef(null);
   const containerRef = useRef(null);
   const theme = useThemeWithUndefined(themeFromProps);
+  let t6;
+
+  if ($[13] !== children || $[14] !== compareValues || $[15] !== value) {
+    t6 = {
+      children,
+      compareValues,
+      value,
+      CompareItem: Tab,
+      scrollableRef,
+      containerRef
+    };
+    $[13] = children;
+    $[14] = compareValues;
+    $[15] = value;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+
   const {
     selectedId,
     activeNode,
@@ -46,78 +115,307 @@ const TabList = _ref => {
     childrenWithValues,
     showLeftArrow,
     showRightArrow
-  } = useScrollableList({
-    children,
-    compareValues,
-    value,
-    CompareItem: Tab,
-    scrollableRef,
-    containerRef
-  });
+  } = useScrollableList(t6);
+  let t7;
+
+  if ($[17] !== activeNode) {
+    t7 = {
+      activeNode,
+      containerRef
+    };
+    $[17] = activeNode;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+
   const {
     indicator,
     isIndicatorHidden
-  } = useIndicator({
-    activeNode,
-    containerRef
-  });
-  const rovingTabIndex = useRovingTabIndex({
-    selectedId,
-    tabRefs
-  });
-  return /*#__PURE__*/React.createElement(TabListContext.Provider, {
-    value: {
+  } = useIndicator(t7);
+  let t8;
+
+  if ($[19] !== selectedId || $[20] !== tabRefs) {
+    t8 = {
+      selectedId,
+      tabRefs
+    };
+    $[19] = selectedId;
+    $[20] = tabRefs;
+    $[21] = t8;
+  } else {
+    t8 = $[21];
+  }
+
+  const rovingTabIndex = useRovingTabIndex(t8);
+  let t9;
+
+  if ($[22] !== onChange || $[23] !== rovingTabIndex || $[24] !== selectedId) {
+    t9 = {
       onChange,
       selectedId,
       rovingTabIndex
-    }
-  }, /*#__PURE__*/React.createElement("div", { ...restProps,
-    className: cn(className, styles.wrapper, styles[theme], styles[mode], STYLES_SIZES[size], sparse && styles.sparse, short && styles.short, isIndicatorHidden && styles.isIndicatorHidden),
-    "data-e2e": e2eId,
-    "data-test": 'tab-list',
-    role: "tablist"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.arrow, styles.arrowLeft, showLeftArrow && styles.shown),
-    "data-test": 'scrollable-list-arrow-left-wrapper'
-  }, /*#__PURE__*/React.createElement(Button, {
-    theme: theme,
-    mode: "clear",
-    notFocusable: true,
-    onClick: prepareDirectionScroller('left'),
-    icon: /*#__PURE__*/React.createElement(LeftOutlineIcon, {
+    };
+    $[22] = onChange;
+    $[23] = rovingTabIndex;
+    $[24] = selectedId;
+    $[25] = t9;
+  } else {
+    t9 = $[25];
+  }
+
+  const t10 = styles[theme];
+  const t11 = styles[mode];
+  const t12 = STYLES_SIZES[size];
+  const t13 = sparse && styles.sparse;
+  const t14 = short && styles.short;
+  const t15 = isIndicatorHidden && styles.isIndicatorHidden;
+  let t16;
+
+  if ($[26] !== className || $[27] !== t10 || $[28] !== t11 || $[29] !== t12 || $[30] !== t13 || $[31] !== t14 || $[32] !== t15) {
+    t16 = cn(className, styles.wrapper, t10, t11, t12, t13, t14, t15);
+    $[26] = className;
+    $[27] = t10;
+    $[28] = t11;
+    $[29] = t12;
+    $[30] = t13;
+    $[31] = t14;
+    $[32] = t15;
+    $[33] = t16;
+  } else {
+    t16 = $[33];
+  }
+
+  const t17 = showLeftArrow && styles.shown;
+  let t18;
+
+  if ($[34] !== t17) {
+    t18 = cn(styles.arrow, styles.arrowLeft, t17);
+    $[34] = t17;
+    $[35] = t18;
+  } else {
+    t18 = $[35];
+  }
+
+  let t19;
+
+  if ($[36] !== prepareDirectionScroller) {
+    t19 = prepareDirectionScroller("left");
+    $[36] = prepareDirectionScroller;
+    $[37] = t19;
+  } else {
+    t19 = $[37];
+  }
+
+  let t20;
+
+  if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = /*#__PURE__*/React.createElement(LeftOutlineIcon, {
       "data-render-all-sizes": true
-    }),
-    size: "s",
-    "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("div", {
-    className: styles.tabsContainer,
-    "data-e2e": e2eId ? `${e2eId}__tabs-container` : null,
-    ref: containerRef,
-    "data-test": 'tab-list__tabs-container'
-  }, childrenWithValues, /*#__PURE__*/React.createElement("span", {
-    style: indicator,
-    className: styles.indicator
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.arrow, styles.arrowRight, showRightArrow && styles.shown),
-    "data-test": 'scrollable-list-arrow-right-wrapper'
-  }, /*#__PURE__*/React.createElement(Button, {
-    theme: theme,
-    mode: "clear",
-    notFocusable: true,
-    onClick: prepareDirectionScroller('right'),
-    icon: /*#__PURE__*/React.createElement(RightOutlineIcon, {
+    });
+    $[38] = t20;
+  } else {
+    t20 = $[38];
+  }
+
+  const t21 = e2eId ? `${e2eId}__left-arrow` : null;
+  let t22;
+
+  if ($[39] !== t19 || $[40] !== t21 || $[41] !== theme) {
+    t22 = /*#__PURE__*/React.createElement(Button, {
+      theme: theme,
+      mode: "clear",
+      notFocusable: true,
+      onClick: t19,
+      icon: t20,
+      size: "s",
+      "data-e2e": t21,
+      "data-test": "scrollable-list-arrow-left"
+    });
+    $[39] = t19;
+    $[40] = t21;
+    $[41] = theme;
+    $[42] = t22;
+  } else {
+    t22 = $[42];
+  }
+
+  let t23;
+
+  if ($[43] !== t18 || $[44] !== t22) {
+    t23 = /*#__PURE__*/React.createElement("div", {
+      className: t18,
+      "data-test": "scrollable-list-arrow-left-wrapper"
+    }, t22);
+    $[43] = t18;
+    $[44] = t22;
+    $[45] = t23;
+  } else {
+    t23 = $[45];
+  }
+
+  const t24 = showLeftArrow && styles.withLeftArrow;
+  const t25 = showRightArrow && styles.withRightArrow;
+  let t26;
+
+  if ($[46] !== t24 || $[47] !== t25) {
+    t26 = cn(styles.scrollable, t24, t25);
+    $[46] = t24;
+    $[47] = t25;
+    $[48] = t26;
+  } else {
+    t26 = $[48];
+  }
+
+  const t27 = e2eId ? `${e2eId}__tabs-container` : null;
+  let t28;
+
+  if ($[49] !== indicator) {
+    t28 = /*#__PURE__*/React.createElement("span", {
+      style: indicator,
+      className: styles.indicator
+    });
+    $[49] = indicator;
+    $[50] = t28;
+  } else {
+    t28 = $[50];
+  }
+
+  let t29;
+
+  if ($[51] !== childrenWithValues || $[52] !== t27 || $[53] !== t28) {
+    t29 = /*#__PURE__*/React.createElement("div", {
+      className: styles.tabsContainer,
+      "data-e2e": t27,
+      ref: containerRef,
+      "data-test": "tab-list__tabs-container"
+    }, childrenWithValues, t28);
+    $[51] = childrenWithValues;
+    $[52] = t27;
+    $[53] = t28;
+    $[54] = t29;
+  } else {
+    t29 = $[54];
+  }
+
+  let t30;
+
+  if ($[55] !== t26 || $[56] !== t29) {
+    t30 = /*#__PURE__*/React.createElement("div", {
+      className: t26,
+      ref: scrollableRef,
+      tabIndex: -1
+    }, t29);
+    $[55] = t26;
+    $[56] = t29;
+    $[57] = t30;
+  } else {
+    t30 = $[57];
+  }
+
+  const t31 = showRightArrow && styles.shown;
+  let t32;
+
+  if ($[58] !== t31) {
+    t32 = cn(styles.arrow, styles.arrowRight, t31);
+    $[58] = t31;
+    $[59] = t32;
+  } else {
+    t32 = $[59];
+  }
+
+  let t33;
+
+  if ($[60] !== prepareDirectionScroller) {
+    t33 = prepareDirectionScroller("right");
+    $[60] = prepareDirectionScroller;
+    $[61] = t33;
+  } else {
+    t33 = $[61];
+  }
+
+  let t34;
+
+  if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
+    t34 = /*#__PURE__*/React.createElement(RightOutlineIcon, {
       "data-render-all-sizes": true
-    }),
-    className: styles.arrowButton,
-    size: "s",
-    "data-e2e": e2eId ? `${e2eId}__right-arrow` : null,
-    "data-test": 'scrollable-list-arrow-right'
-  }))));
+    });
+    $[62] = t34;
+  } else {
+    t34 = $[62];
+  }
+
+  const t35 = e2eId ? `${e2eId}__right-arrow` : null;
+  let t36;
+
+  if ($[63] !== t33 || $[64] !== t35 || $[65] !== theme) {
+    t36 = /*#__PURE__*/React.createElement(Button, {
+      theme: theme,
+      mode: "clear",
+      notFocusable: true,
+      onClick: t33,
+      icon: t34,
+      className: styles.arrowButton,
+      size: "s",
+      "data-e2e": t35,
+      "data-test": "scrollable-list-arrow-right"
+    });
+    $[63] = t33;
+    $[64] = t35;
+    $[65] = theme;
+    $[66] = t36;
+  } else {
+    t36 = $[66];
+  }
+
+  let t37;
+
+  if ($[67] !== t32 || $[68] !== t36) {
+    t37 = /*#__PURE__*/React.createElement("div", {
+      className: t32,
+      "data-test": "scrollable-list-arrow-right-wrapper"
+    }, t36);
+    $[67] = t32;
+    $[68] = t36;
+    $[69] = t37;
+  } else {
+    t37 = $[69];
+  }
+
+  let t38;
+
+  if ($[70] !== e2eId || $[71] !== restProps || $[72] !== t16 || $[73] !== t23 || $[74] !== t30 || $[75] !== t37) {
+    t38 = /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+      className: t16,
+      "data-e2e": e2eId,
+      "data-test": "tab-list",
+      role: "tablist"
+    }), t23, t30, t37);
+    $[70] = e2eId;
+    $[71] = restProps;
+    $[72] = t16;
+    $[73] = t23;
+    $[74] = t30;
+    $[75] = t37;
+    $[76] = t38;
+  } else {
+    t38 = $[76];
+  }
+
+  let t39;
+
+  if ($[77] !== t38 || $[78] !== t9) {
+    t39 = /*#__PURE__*/React.createElement(TabListContext.Provider, {
+      value: t9
+    }, t38);
+    $[77] = t38;
+    $[78] = t9;
+    $[79] = t39;
+  } else {
+    t39 = $[79];
+  }
+
+  return t39;
 };
 
 TabList.displayName = 'TabList';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/tab-list",
-  "version": "0.18.4",
+  "version": "0.19.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,20 +17,21 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/button": "^0.24.6",
-    "@rescui/use-resize-observer": "^0.3.4",
-    "classnames": "^2.2.6"
+    "@rescui/button": "^0.25.0",
+    "@rescui/use-resize-observer": "^0.4.0",
+    "classnames": "^2.2.6",
+    "react-compiler-runtime": "^1.0.0"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
     "prop-types": "^15",
-    "react": ">=16.8.0 <20"
+    "react": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.3",
+    "@rescui/colors": "^0.3.4",
     "@rescui/postcss-preset-library": "^0.2.3",
-    "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.4",
+    "@rescui/scripts": "^0.5.3",
+    "@rescui/typography": "^0.28.0",
     "@rescui/visual-regression": "^0.1.4"
   },
   "scripts": {
@@ -38,5 +39,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "3711cbfc0c797014395421b008aa5331d6d47c6e"
+  "gitHead": "8ffbbe20b8bcbb9ea15204113ab603675d4c03cd"
 }