@rescui/tab-list 0.18.4 → 0.19.0

package/lib/parts/tab.js

@@ -1,76 +1,220 @@
 "use client";
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
 import React, { forwardRef, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './tab-list.p.module.css.js';
 import { useTabListContext } from './tab-list-context.js';
 const TabTag = /*#__PURE__*/forwardRef((props, ref) => {
-  if (typeof props.href !== 'undefined') {
-    return /*#__PURE__*/React.createElement("a", {
-      ref: ref,
-      ...props
-    }, props.children);
+  const $ = c(6);
+
+  if (typeof props.href !== "undefined") {
+    let t0;
+
+    if ($[0] !== props || $[1] !== ref) {
+      t0 = /*#__PURE__*/React.createElement("a", _extends({
+        ref: ref
+      }, props), props.children);
+      $[0] = props;
+      $[1] = ref;
+      $[2] = t0;
+    } else {
+      t0 = $[2];
+    }
+
+    return t0;
   }
 
-  return /*#__PURE__*/React.createElement("button", {
-    ref: ref,
-    ...props,
-    type: "button"
-  }, props.children);
+  let t0;
+
+  if ($[3] !== props || $[4] !== ref) {
+    t0 = /*#__PURE__*/React.createElement("button", _extends({
+      ref: ref
+    }, props, {
+      type: "button"
+    }), props.children);
+    $[3] = props;
+    $[4] = ref;
+    $[5] = t0;
+  } else {
+    t0 = $[5];
+  }
+
+  return t0;
 });
 TabTag.displayName = 'TabTag';
-const Tab = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    value,
-    className,
-    children,
-    icon,
-    iconPosition = 'left',
-    itemId,
-    onClick,
-    onKeyDown,
-    ['data-e2e']: e2eId,
-    ...restProps
-  } = _ref;
+const Tab = /*#__PURE__*/forwardRef((t0, ref) => {
+  const $ = c(39);
+  let children;
+  let className;
+  let e2eId;
+  let icon;
+  let itemId;
+  let onClick;
+  let onKeyDown;
+  let restProps;
+  let t1;
+  let value;
+
+  if ($[0] !== t0) {
+    ({
+      value,
+      className,
+      children,
+      icon,
+      iconPosition: t1,
+      itemId,
+      onClick,
+      onKeyDown,
+      "data-e2e": e2eId,
+      ...restProps
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = e2eId;
+    $[4] = icon;
+    $[5] = itemId;
+    $[6] = onClick;
+    $[7] = onKeyDown;
+    $[8] = restProps;
+    $[9] = t1;
+    $[10] = value;
+  } else {
+    children = $[1];
+    className = $[2];
+    e2eId = $[3];
+    icon = $[4];
+    itemId = $[5];
+    onClick = $[6];
+    onKeyDown = $[7];
+    restProps = $[8];
+    t1 = $[9];
+    value = $[10];
+  }
+
+  const iconPosition = t1 === undefined ? "left" : t1;
   const {
     onChange,
     selectedId,
     rovingTabIndex
   } = useTabListContext();
   const selected = itemId === selectedId;
-  const resolvedTabIndex = typeof itemId === 'undefined' || itemId === rovingTabIndex?.currentTabStopId ? 0 : -1;
-  return /*#__PURE__*/React.createElement(TabTag, { ...restProps,
-    className: cn(styles.tab, selected && styles.selected, iconPosition === 'right' ? styles.iconRight : styles.iconLeft, className),
-    onClick: e => {
+  const resolvedTabIndex = typeof itemId === "undefined" || itemId === rovingTabIndex?.currentTabStopId ? 0 : -1;
+  const t2 = selected && styles.selected;
+  const t3 = iconPosition === "right" ? styles.iconRight : styles.iconLeft;
+  let t4;
+
+  if ($[11] !== className || $[12] !== t2 || $[13] !== t3) {
+    t4 = cn(styles.tab, t2, t3, className);
+    $[11] = className;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+
+  let t5;
+
+  if ($[15] !== onChange || $[16] !== onClick || $[17] !== value) {
+    t5 = e => {
       if (onClick) {
         onClick(e);
       }
 
       onChange(value);
-    },
-    onKeyDown: e => {
-      if (typeof itemId !== 'undefined') {
-        rovingTabIndex?.onTabKeyDown(e, itemId);
+    };
+
+    $[15] = onChange;
+    $[16] = onClick;
+    $[17] = value;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+
+  let t6;
+
+  if ($[19] !== itemId || $[20] !== onKeyDown || $[21] !== rovingTabIndex) {
+    t6 = e_0 => {
+      if (typeof itemId !== "undefined") {
+        rovingTabIndex?.onTabKeyDown(e_0, itemId);
       }
 
-      if (e.key === ' ' || e.key === 'Enter') {
-        e.currentTarget.click();
-        e.preventDefault();
+      if (e_0.key === " " || e_0.key === "Enter") {
+        e_0.currentTarget.click();
+        e_0.preventDefault();
       }
 
-      onKeyDown?.(e);
-    },
-    role: "tab",
-    "aria-selected": selected,
-    tabIndex: resolvedTabIndex,
-    ref: ref,
-    "data-e2e": e2eId,
-    "data-test": `tab${selected ? ' tab-selected' : ''}`,
-    "data-rs-internal": 'tab-list__tab'
-  }, icon && /*#__PURE__*/cloneElement(icon, {
-    className: cn(icon.props.className, styles.icon),
-    'data-render-all-sizes': true
-  }), /*#__PURE__*/React.createElement("div", null, children));
+      onKeyDown?.(e_0);
+    };
+
+    $[19] = itemId;
+    $[20] = onKeyDown;
+    $[21] = rovingTabIndex;
+    $[22] = t6;
+  } else {
+    t6 = $[22];
+  }
+
+  const t7 = `tab${selected ? " tab-selected" : ""}`;
+  let t8;
+
+  if ($[23] !== icon) {
+    t8 = icon && /*#__PURE__*/cloneElement(icon, {
+      className: cn(icon.props.className, styles.icon),
+      "data-render-all-sizes": true
+    });
+    $[23] = icon;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+
+  let t9;
+
+  if ($[25] !== children) {
+    t9 = /*#__PURE__*/React.createElement("div", null, children);
+    $[25] = children;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+
+  let t10;
+
+  if ($[27] !== e2eId || $[28] !== ref || $[29] !== resolvedTabIndex || $[30] !== restProps || $[31] !== selected || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t7 || $[36] !== t8 || $[37] !== t9) {
+    t10 = /*#__PURE__*/React.createElement(TabTag, _extends({}, restProps, {
+      className: t4,
+      onClick: t5,
+      onKeyDown: t6,
+      role: "tab",
+      "aria-selected": selected,
+      tabIndex: resolvedTabIndex,
+      ref: ref,
+      "data-e2e": e2eId,
+      "data-test": t7,
+      "data-rs-internal": "tab-list__tab"
+    }), t8, t9);
+    $[27] = e2eId;
+    $[28] = ref;
+    $[29] = resolvedTabIndex;
+    $[30] = restProps;
+    $[31] = selected;
+    $[32] = t4;
+    $[33] = t5;
+    $[34] = t6;
+    $[35] = t7;
+    $[36] = t8;
+    $[37] = t9;
+    $[38] = t10;
+  } else {
+    t10 = $[38];
+  }
+
+  return t10;
 });
 Tab.displayName = 'Tab';
 Tab.propTypes = {

package/lib/parts/use-indicator.js

@@ -1,5 +1,6 @@
 "use client";
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { c } from 'react-compiler-runtime';
+import { useState, useRef, useEffect } from 'react';
 import { useResizeObserver } from '@rescui/use-resize-observer';
 
 function calculateIndicator(activeNodeRef, parentNode) {
@@ -13,51 +14,136 @@ function calculateIndicator(activeNodeRef, parentNode) {
   };
 }
 
-const useIndicator = _ref => {
-  let {
+const useIndicator = t0 => {
+  const $ = c(16);
+  const {
     activeNode,
     containerRef
-  } = _ref;
-  const [indicator, setIndicator] = useState({
-    left: 0,
-    width: 0
-  });
-  const firstIndicatorUpdate = useRef(true); // Catch the resize of the container which is happening when the fonts downloads for example
-
-  const updateIndicator = useCallback(function () {
-    let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
-    if (!activeNode || !containerRef.current) {
-      return;
-    }
-
-    let isTransitionEnabled;
-
-    if (firstIndicatorUpdate.current) {
-      firstIndicatorUpdate.current = false;
-      isTransitionEnabled = false;
-    } else {
-      isTransitionEnabled = isValueChanged;
-    }
-
-    setIndicator({ ...calculateIndicator(activeNode, containerRef.current),
-      transitionDuration: !isTransitionEnabled ? '0s' : null
-    });
-  }, [activeNode, containerRef]); // Trigger it on value change for example
-
-  useEffect(() => updateIndicator(true), [updateIndicator]); // Or changing container size
-
-  useResizeObserver(containerRef, () => updateIndicator(false), {
-    ignoreFirstCall: true
-  }); // Or changing active element size
-
-  useResizeObserver(activeNode, () => updateIndicator(false), {
-    ignoreFirstCall: true
-  });
-  return {
-    indicator,
-    isIndicatorHidden: typeof indicator.transitionDuration === 'undefined'
-  };
+  } = t0;
+  let t1;
+
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      left: 0,
+      width: 0
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+
+  const [indicator, setIndicator] = useState(t1);
+  const firstIndicatorUpdate = useRef(true);
+  let t2;
+
+  if ($[1] !== activeNode || $[2] !== containerRef) {
+    t2 = t3 => {
+      const isValueChanged = t3 === undefined ? false : t3;
+
+      if (!activeNode || !containerRef.current) {
+        return;
+      }
+
+      let isTransitionEnabled;
+
+      if (firstIndicatorUpdate.current) {
+        firstIndicatorUpdate.current = false;
+        isTransitionEnabled = false;
+      } else {
+        isTransitionEnabled = isValueChanged;
+      }
+
+      setIndicator({ ...calculateIndicator(activeNode, containerRef.current),
+        transitionDuration: !isTransitionEnabled ? "0s" : null
+      });
+    };
+
+    $[1] = activeNode;
+    $[2] = containerRef;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+
+  const updateIndicator = t2;
+  let t3;
+  let t4;
+
+  if ($[4] !== updateIndicator) {
+    t3 = () => updateIndicator(true);
+
+    t4 = [updateIndicator];
+    $[4] = updateIndicator;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t3 = $[5];
+    t4 = $[6];
+  }
+
+  useEffect(t3, t4);
+  let t5;
+
+  if ($[7] !== updateIndicator) {
+    t5 = () => updateIndicator(false);
+
+    $[7] = updateIndicator;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+
+  let t6;
+
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      ignoreFirstCall: true
+    };
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+
+  useResizeObserver(containerRef, t5, t6);
+  let t7;
+
+  if ($[10] !== updateIndicator) {
+    t7 = () => updateIndicator(false);
+
+    $[10] = updateIndicator;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+
+  let t8;
+
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
+      ignoreFirstCall: true
+    };
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+
+  useResizeObserver(activeNode, t7, t8);
+  const t9 = typeof indicator.transitionDuration === "undefined";
+  let t10;
+
+  if ($[13] !== indicator || $[14] !== t9) {
+    t10 = {
+      indicator,
+      isIndicatorHidden: t9
+    };
+    $[13] = indicator;
+    $[14] = t9;
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+
+  return t10;
 };
 
 export { useIndicator };

package/lib/parts/use-roving-tab-index.js

@@ -1,5 +1,6 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import React from 'react'; // eslint-disable-next-line complexity
+import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
+import { c } from 'react-compiler-runtime';
+import { useState } from 'react';
 
 const getNextItemId = _ref => {
   let {
@@ -31,44 +32,67 @@ const getNextItemId = _ref => {
   return currentItemId;
 };
 
-const useRovingTabIndex = _ref2 => {
-  let {
+const useRovingTabIndex = t0 => {
+  const $ = c(5);
+  const {
     selectedId,
     tabRefs
-  } = _ref2;
-  const [currentTabStopId, setCurrentTabStopId] = React.useState(selectedId ?? 0);
-  const [previousSelectedId, setPreviousSelectedId] = React.useState(selectedId);
+  } = t0;
+  const [currentTabStopId, setCurrentTabStopId] = useState(selectedId ?? 0);
+  const [previousSelectedId, setPreviousSelectedId] = useState(selectedId);
 
   if (!Object.is(selectedId, previousSelectedId)) {
     setPreviousSelectedId(selectedId);
 
-    if (typeof selectedId === 'number') {
+    if (typeof selectedId === "number") {
       setCurrentTabStopId(selectedId);
     }
   }
 
   const currentTabsRefs = tabRefs?.current;
-  const onTabKeyDown = React.useCallback((e, itemId) => {
-    var _context;
+  let t1;
 
-    if (!_includesInstanceProperty(_context = ['ArrowLeft', 'ArrowRight', 'Home', 'End']).call(_context, e.key)) {
-      return;
-    }
+  if ($[0] !== currentTabsRefs) {
+    t1 = (e, itemId) => {
+      var _context;
+
+      if (!_includesInstanceProperty(_context = ["ArrowLeft", "ArrowRight", "Home", "End"]).call(_context, e.key)) {
+        return;
+      }
+
+      const itemsCount = currentTabsRefs.size ?? 0;
+      const nextItemId = getNextItemId({
+        currentItemId: itemId,
+        itemsCount,
+        key: e.key
+      });
+      e.preventDefault();
+      setCurrentTabStopId(nextItemId);
+      currentTabsRefs.get(nextItemId)?.focus();
+    };
+
+    $[0] = currentTabsRefs;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+
+  const onTabKeyDown = t1;
+  let t2;
+
+  if ($[2] !== currentTabStopId || $[3] !== onTabKeyDown) {
+    t2 = {
+      currentTabStopId,
+      onTabKeyDown
+    };
+    $[2] = currentTabStopId;
+    $[3] = onTabKeyDown;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
 
-    const itemsCount = currentTabsRefs.size ?? 0;
-    const nextItemId = getNextItemId({
-      currentItemId: itemId,
-      itemsCount,
-      key: e.key
-    });
-    e.preventDefault();
-    setCurrentTabStopId(nextItemId);
-    currentTabsRefs.get(nextItemId)?.focus();
-  }, [currentTabsRefs]);
-  return {
-    currentTabStopId,
-    onTabKeyDown
-  };
+  return t2;
 };
 
 export { useRovingTabIndex };