@rescui/tab-list 0.18.5-RUI-308-Fix-select-issues-405b9fa40.12 → 0.19.0

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

@@ -1,8 +1,8 @@
 "use client";
-import React, { useRef, useState, useCallback, useMemo, useEffect, cloneElement } from 'react';
+import { c } from 'react-compiler-runtime';
+import React, { useRef, useState, useEffect, cloneElement } from 'react';
 import { useResizeObserver } from '@rescui/use-resize-observer';
-import { deepMap } from './deep-map.js'; // arrow (32) + shadow (10) + shadow blur (~8) + item focus outline (4)
-
+import { deepMap } from './deep-map.js';
 const ARROW_AREA_WIDTH_IN_PX = 54;
 
 function patchItemIfNeeded(_ref) {
@@ -109,18 +109,79 @@ function scrollIntoView(activeNode, parentNode) {
   }
 }
 
-const useScrollableList = _ref2 => {
-  let {
+function getChildrenWithValues(children, compareValues, value, CompareItem, onFocus, createTabRef) {
+  let counter = 0;
+  let currentSelectedItemId = null;
+  const items = deepMap(children, child => {
+    if (child.type === CompareItem) {
+      const {
+        value: childValue = counter,
+        onFocus: onFocusFromProps,
+        ...restProps
+      } = child.props;
+      const hasAlreadySelectedItem = currentSelectedItemId === null;
+      const isSelectedItem = hasAlreadySelectedItem && compareValues(value, childValue);
+
+      if (isSelectedItem) {
+        currentSelectedItemId = counter;
+      }
+
+      const setTabRef = createTabRef(counter, isSelectedItem);
+      const patchedItem = patchItemIfNeeded({
+        child,
+        itemId: counter,
+        childValue,
+        ...restProps,
+        onFocus: event => {
+          if (onFocusFromProps) {
+            onFocusFromProps(event);
+          }
+
+          onFocus(event);
+        },
+        ref: node => {
+          setTabRef(node);
+          const childRef = child.ref;
+
+          if (typeof childRef === 'function') {
+            childRef(node);
+          } else if (childRef) {
+            childRef.current = node;
+          }
+        }
+      });
+      counter += 1;
+      return patchedItem;
+    } else {
+      return child;
+    }
+  });
+  return {
+    childrenWithValues: React.Children.toArray(items),
+    selectedId: currentSelectedItemId
+  };
+}
+
+const useScrollableList = t0 => {
+  const $ = c(32);
+  const {
     children,
     compareValues,
     value,
     CompareItem,
     scrollableRef,
     containerRef
-  } = _ref2;
-  const tabRefs = useRef(new Map()); // reset targeted element on scrolling by arrows
-  // so on window resize there wouldn't scroll to it
+  } = t0;
+  let t1;
 
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = new Map();
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+
+  const tabRefs = useRef(t1);
   const [targetedEl, setTargetedEl] = useState(null);
   const [activeNode, setActiveNode] = useState(null);
   const [prevActiveNode, setPrevActiveNode] = useState(null);
@@ -130,144 +191,224 @@ const useScrollableList = _ref2 => {
     setTargetedEl(activeNode);
   }
 
-  const [{
+  let t2;
+
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {
+      showLeftArrow: false,
+      showRightArrow: false
+    };
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+
+  const [t3, setShowArrows] = useState(t2);
+  const {
     showLeftArrow,
     showRightArrow
-  }, setShowArrows] = useState({
-    showLeftArrow: false,
-    showRightArrow: false
-  });
-  const onFocus = useCallback(e => {
-    setTargetedEl(e.target);
-  }, []);
-  const createTabRef = useCallback((itemId, isSelectedItem) => node => {
-    if (node) {
-      tabRefs.current.set(itemId, node);
-    } else {
-      tabRefs.current.delete(itemId);
-    }
+  } = t3;
+  let t4;
 
-    if (isSelectedItem) {
-      setActiveNode(node);
-    }
-  }, []);
-  const [childrenWithValues, selectedId] = useMemo(() => {
-    let counter = 0;
-    let currentSelectedItemId = null;
-    /*
-     * deepMap invokes its callback synchronously. The callback ref is created
-     * during render, but accesses tabRefs.current only when React invokes it
-     * during commit.
-     */
-    // eslint-disable-next-line react-hooks/refs
-
-    const items = deepMap(children, child => {
-      if (child.type === CompareItem) {
-        const {
-          value: childValue = counter,
-          onFocus: onFocusFromProps,
-          ...restProps
-        } = child.props;
-        const hasAlreadySelectedItem = currentSelectedItemId === null;
-        const isSelectedItem = hasAlreadySelectedItem && compareValues(value, childValue);
-
-        if (isSelectedItem) {
-          // same explanation as above
-          // eslint-disable-next-line react-hooks/immutability
-          currentSelectedItemId = counter;
-        }
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = e => {
+      setTargetedEl(e.target);
+    };
 
-        const setTabRef = createTabRef(counter, isSelectedItem);
-        const patchedItem = patchItemIfNeeded({
-          child,
-          itemId: counter,
-          childValue,
-          ...restProps,
-          onFocus: e => {
-            if (onFocusFromProps) {
-              onFocusFromProps(e);
-            }
-
-            onFocus(e);
-          },
-          ref: node => {
-            setTabRef(node);
-            const childRef = child.ref;
-
-            if (typeof childRef === 'function') {
-              childRef(node);
-            } else if (childRef) {
-              childRef.current = node;
-            }
-          }
-        });
-        counter += 1;
-        return patchedItem;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+
+  const onFocus = t4;
+  let t5;
+
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = (itemId, isSelectedItem) => node => {
+      if (node) {
+        tabRefs.current.set(itemId, node);
       } else {
-        return child;
+        tabRefs.current.delete(itemId);
       }
-    });
-    return [React.Children.toArray(items), currentSelectedItemId];
-  }, [children, value, compareValues, onFocus, CompareItem, createTabRef]);
-  const prepareDirectionScroller = useCallback(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);
-  }, [scrollableRef]);
-  const setArrowsVisibility = useCallback(() => {
-    if (!scrollableRef.current) {
-      return;
-    }
 
-    setShowArrows(calculateArrowsVisibility(scrollableRef.current));
-  }, [scrollableRef]); // update arrows while smooth scrolling
+      if (isSelectedItem) {
+        setActiveNode(node);
+      }
+    };
 
-  useEffect(() => {
-    const scrollContainer = scrollableRef.current;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
 
-    if (!scrollContainer) {
-      return null;
-    }
+  const createTabRef = t5;
+  let t6;
 
-    scrollContainer.addEventListener('scroll', setArrowsVisibility, {
-      passive: true
-    });
-    return () => scrollContainer.removeEventListener('scroll', setArrowsVisibility);
-  }, [scrollableRef, setArrowsVisibility]); // scrollIntoView active element when it changes or the component resizes
+  if ($[4] !== CompareItem || $[5] !== children || $[6] !== compareValues || $[7] !== value) {
+    t6 = getChildrenWithValues(children, compareValues, value, CompareItem, onFocus, createTabRef);
+    $[4] = CompareItem;
+    $[5] = children;
+    $[6] = compareValues;
+    $[7] = value;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+
+  const {
+    childrenWithValues,
+    selectedId
+  } = t6;
+  let t7;
+
+  if ($[9] !== scrollableRef) {
+    t7 = 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);
+    };
+
+    $[9] = scrollableRef;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
 
-  const updateScrollState = useCallback(() => {
-    const scrollableEl = scrollableRef.current;
+  const prepareDirectionScroller = t7;
+  let t8;
 
-    if (!scrollableEl) {
-      return;
-    }
+  if ($[11] !== scrollableRef) {
+    t8 = () => {
+      if (!scrollableRef.current) {
+        return;
+      }
 
-    if (targetedEl) {
-      scrollIntoView(targetedEl, scrollableEl);
-    }
+      setShowArrows(calculateArrowsVisibility(scrollableRef.current));
+    };
 
-    setArrowsVisibility();
-  }, [scrollableRef, targetedEl, setArrowsVisibility]); // look at the containers resizes
+    $[11] = scrollableRef;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
 
-  useResizeObserver(containerRef, updateScrollState, {
-    ignoreFirstCall: true
-  });
-  useResizeObserver(scrollableRef, updateScrollState, {
-    ignoreFirstCall: true
-  });
-  useEffect(updateScrollState, [updateScrollState]);
-  return {
-    selectedId,
-    activeNode,
-    prepareDirectionScroller,
-    tabRefs,
-    childrenWithValues,
-    showLeftArrow,
-    showRightArrow
-  };
+  const setArrowsVisibility = t8;
+  let t10;
+  let t9;
+
+  if ($[13] !== scrollableRef || $[14] !== setArrowsVisibility) {
+    t9 = () => {
+      const scrollContainer = scrollableRef.current;
+
+      if (!scrollContainer) {
+        return null;
+      }
+
+      scrollContainer.addEventListener("scroll", setArrowsVisibility, {
+        passive: true
+      });
+      return () => scrollContainer.removeEventListener("scroll", setArrowsVisibility);
+    };
+
+    t10 = [scrollableRef, setArrowsVisibility];
+    $[13] = scrollableRef;
+    $[14] = setArrowsVisibility;
+    $[15] = t10;
+    $[16] = t9;
+  } else {
+    t10 = $[15];
+    t9 = $[16];
+  }
+
+  useEffect(t9, t10);
+  let t11;
+
+  if ($[17] !== scrollableRef || $[18] !== setArrowsVisibility || $[19] !== targetedEl) {
+    t11 = () => {
+      const scrollableEl = scrollableRef.current;
+
+      if (!scrollableEl) {
+        return;
+      }
+
+      if (targetedEl) {
+        scrollIntoView(targetedEl, scrollableEl);
+      }
+
+      setArrowsVisibility();
+    };
+
+    $[17] = scrollableRef;
+    $[18] = setArrowsVisibility;
+    $[19] = targetedEl;
+    $[20] = t11;
+  } else {
+    t11 = $[20];
+  }
+
+  const updateScrollState = t11;
+  let t12;
+
+  if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = {
+      ignoreFirstCall: true
+    };
+    $[21] = t12;
+  } else {
+    t12 = $[21];
+  }
+
+  useResizeObserver(containerRef, updateScrollState, t12);
+  let t13;
+
+  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = {
+      ignoreFirstCall: true
+    };
+    $[22] = t13;
+  } else {
+    t13 = $[22];
+  }
+
+  useResizeObserver(scrollableRef, updateScrollState, t13);
+  let t14;
+
+  if ($[23] !== updateScrollState) {
+    t14 = [updateScrollState];
+    $[23] = updateScrollState;
+    $[24] = t14;
+  } else {
+    t14 = $[24];
+  }
+
+  useEffect(updateScrollState, t14);
+  let t15;
+
+  if ($[25] !== activeNode || $[26] !== childrenWithValues || $[27] !== prepareDirectionScroller || $[28] !== selectedId || $[29] !== showLeftArrow || $[30] !== showRightArrow) {
+    t15 = {
+      selectedId,
+      activeNode,
+      prepareDirectionScroller,
+      tabRefs,
+      childrenWithValues,
+      showLeftArrow,
+      showRightArrow
+    };
+    $[25] = activeNode;
+    $[26] = childrenWithValues;
+    $[27] = prepareDirectionScroller;
+    $[28] = selectedId;
+    $[29] = showLeftArrow;
+    $[30] = showRightArrow;
+    $[31] = t15;
+  } else {
+    t15 = $[31];
+  }
+
+  return t15;
 };
 
 export { useScrollableList };

package/lib/tab-list.d.ts

@@ -25,7 +25,7 @@ export type TabListProps<T extends TabListValueType> = {
     compareValues?: ScrollableListCompareValueType<T>;
 };
 declare const TabList: {
-    <T extends TabListValueType>({ size, sparse, className, mode, short, ["data-e2e"]: e2eId, compareValues, value, onChange, children, theme: themeFromProps, ...restProps }: TabListProps<T>): React.JSX.Element;
+    <T extends TabListValueType>({ size, sparse, className, mode, short, "data-e2e": e2eId, compareValues, value, onChange, children, theme: themeFromProps, ...restProps }: TabListProps<T>): React.JSX.Element;
     displayName: string;
     propTypes: {
         size: PropTypes.Requireable<string>;