@astryxdesign/core 0.7.1 → 0.7.2-canary.020e1fe

package/src/TreeList/TreeList.test.tsx

@@ -11,6 +11,7 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
+import type {ReactNode} from 'react';
 import userEvent from '@testing-library/user-event';
 import * as stylex from '@stylexjs/stylex';
 import {TreeList} from './TreeList';
@@ -609,12 +610,12 @@ describe('TreeList', () => {
     });
 
     it("variant='noGuides' preserves per-level indentation on the rows", () => {
-      // Indentation lives on the row's margin-inline-start (not the guide
-      // element), so it must survive when the connectors are suppressed. The
-      // per-row distance is published as the `--_tree-indent` custom property
-      // (not an inline longhand — see #4308), so the theme layer can override
-      // the `margin-inline-start` declaration. A deeper row is indented more
-      // than a shallower one.
+      // Indentation lives inside the row's padding-inline-start (not the
+      // guide element), so it must survive when the connectors are
+      // suppressed. The per-row distance is published as the `--_tree-indent`
+      // custom property (not an inline longhand — see #4308), so the theme
+      // layer can override the `padding-inline-start` declaration. A deeper
+      // row is indented more than a shallower one.
       const {container} = render(
         <TreeList items={deepItems} variant="noGuides" />,
       );
@@ -720,6 +721,326 @@ describe('TreeList', () => {
       expect(indentOf('Mid')).toContain('var(--tree-list-indent)');
       expect(indentOf('Leaf')).toContain('var(--tree-list-indent)');
     });
+
+    it('indents inside the row so nested rows keep the full list width', () => {
+      // The row box keeps its own inline padding and stays full width; the
+      // indent is padding on a child inside it. A nested row's hover and
+      // selected fill therefore spans the list like a root row's, while its
+      // content lands where a margin indent would have put it.
+      render(<TreeList items={deepItems} />);
+      const rules = collectCssText();
+      expect(rules).toMatch(
+        /padding-inline-start:\s*var\(--_tree-indent,\s*0px\)/,
+      );
+      expect(rules).not.toMatch(/margin-inline-start:\s*var\(--_tree-indent/);
+
+      const row = screen
+        .getByText('Leaf')
+        .closest<HTMLElement>('.astryx-tree-list-item')!;
+      const indented = row.firstElementChild as HTMLElement;
+      expect(indented.className).toContain('indentedContent');
+      expect(row.className).not.toContain('indentedContent');
+    });
+
+    it("keeps the indent when a caller sets the row's padding", () => {
+      // Caller padding lands on the row box; the indent is on a separate
+      // element inside it, so the two compose instead of one replacing the
+      // other.
+      const items = [
+        {
+          id: 'root',
+          label: 'Root',
+          isExpanded: true,
+          children: [
+            {id: 'leaf', label: 'Leaf', style: {paddingInlineStart: '20px'}},
+          ],
+        },
+      ];
+      render(<TreeList items={items} />);
+      const row = screen
+        .getByText('Leaf')
+        .closest<HTMLElement>('.astryx-tree-list-item')!;
+      expect(row.style.paddingInlineStart).toBe('20px');
+      expect(row.getAttribute('style')).toContain('--_tree-indent');
+      expect((row.firstElementChild as HTMLElement).className).toContain(
+        'indentedContent',
+      );
+    });
+
+    describe('link rows', () => {
+      const linkItems = (endContent?: ReactNode): TreeListItemData[] => [
+        {
+          id: 'docs',
+          label: 'Docs',
+          isExpanded: true,
+          children: [
+            {id: 'report', label: 'Report', href: '/report', endContent},
+          ],
+        },
+      ];
+      const rowSurfaceOf = (link: HTMLElement) =>
+        link.closest<HTMLElement>('.astryx-tree-list-item')!
+          .firstElementChild as HTMLElement;
+
+      it('follows the link when the row is clicked outside its label', () => {
+        // The indent is part of the row now, so a click there must do what
+        // the row does. The click is delegated to the anchor through the
+        // shared enlarged-surface hook, modifier keys included.
+        render(<TreeList items={linkItems()} />);
+        const link = screen.getByRole('link', {name: 'Report'});
+        const clicks: MouseEvent[] = [];
+        link.addEventListener('click', e => {
+          clicks.push(e);
+          e.preventDefault();
+        });
+
+        fireEvent.click(rowSurfaceOf(link), {metaKey: true});
+        expect(clicks).toHaveLength(1);
+        expect(clicks[0].metaKey).toBe(true);
+
+        // The row box's own padding follows the link too.
+        fireEvent.click(rowSurfaceOf(link).parentElement!);
+        expect(clicks).toHaveLength(2);
+
+        // Clicking the label itself reaches the anchor once, not twice.
+        fireEvent.click(link);
+        expect(clicks).toHaveLength(3);
+      });
+
+      it('reports one click to ancestors per press', () => {
+        // The delegated click bubbles from the anchor; the original stops,
+        // so a listener above the tree sees exactly one click.
+        const onTreeClick = vi.fn();
+        render(<TreeList items={linkItems()} onClick={onTreeClick} />);
+        const link = screen.getByRole('link', {name: 'Report'});
+        link.addEventListener('click', e => e.preventDefault());
+
+        fireEvent.click(rowSurfaceOf(link));
+        expect(onTreeClick).toHaveBeenCalledTimes(1);
+        expect(onTreeClick.mock.calls[0][0].target).toBe(link);
+      });
+
+      it('leaves a role-based control in the row to itself', () => {
+        const onSwitch = vi.fn();
+        render(
+          <TreeList
+            items={linkItems(
+              <span
+                role="switch"
+                aria-checked="false"
+                aria-label="Pin"
+                tabIndex={0}
+                onClick={onSwitch}>
+                Pin
+              </span>,
+            )}
+          />,
+        );
+        const link = screen.getByRole('link', {name: 'Report'});
+        const onLinkClick = vi.fn((e: Event) => e.preventDefault());
+        link.addEventListener('click', onLinkClick);
+
+        fireEvent.click(screen.getByRole('switch', {name: 'Pin'}));
+        expect(onSwitch).toHaveBeenCalledTimes(1);
+        expect(onLinkClick).not.toHaveBeenCalled();
+      });
+
+      it('opens the link in a new tab on a middle-click in the row', () => {
+        const open = vi.spyOn(window, 'open').mockImplementation(() => null);
+        render(<TreeList items={linkItems()} />);
+        const link = screen.getByRole('link', {name: 'Report'});
+
+        fireEvent.mouseUp(rowSurfaceOf(link), {button: 1});
+        expect(open).toHaveBeenCalledWith('/report', '_blank', 'noopener');
+
+        // A middle-click on the label is the browser's own.
+        open.mockClear();
+        fireEvent.mouseUp(link, {button: 1});
+        expect(open).not.toHaveBeenCalled();
+        open.mockRestore();
+      });
+    });
+
+    it('does not follow a disabled link row', () => {
+      const items = [
+        {
+          id: 'docs',
+          label: 'Docs',
+          isExpanded: true,
+          children: [
+            {id: 'report', label: 'Report', href: '/report', isDisabled: true},
+          ],
+        },
+      ];
+      render(<TreeList items={items} />);
+      const link = screen.getByRole('link', {name: 'Report', hidden: true});
+      const onLinkClick = vi.fn((e: Event) => e.preventDefault());
+      link.addEventListener('click', onLinkClick);
+      const row = link.closest<HTMLElement>('.astryx-tree-list-item')!;
+      fireEvent.click(row.firstElementChild!);
+      expect(onLinkClick).not.toHaveBeenCalled();
+    });
+
+    describe('row clicks outside the label (FR7)', () => {
+      // Each row sits under an expanded root, so it has an indent; the click
+      // lands on the row surface (indent, reserved chevron column, padding),
+      // not on the label.
+      const underRoot = (children: TreeListItemData[]): TreeListItemData[] => [
+        {id: 'root', label: 'Root', isExpanded: true, children},
+      ];
+      // The row box itself (its own padding) and the indented content inside
+      // it: FR7 covers clicks on both.
+      const rowOf = (label: string) =>
+        screen.getByText(label).closest<HTMLElement>('.astryx-tree-list-item')!;
+      const rowSurfaceOf = (label: string) =>
+        rowOf(label).firstElementChild as HTMLElement;
+      const folder: TreeListItemData = {
+        id: 'folder',
+        label: 'Folder',
+        children: [{id: 'file', label: 'File'}],
+      };
+
+      it("runs an action row's onClick once", () => {
+        const onClick = vi.fn();
+        render(
+          <TreeList items={underRoot([{id: 'run', label: 'Run', onClick}])} />,
+        );
+        fireEvent.click(rowSurfaceOf('Run'));
+        expect(onClick).toHaveBeenCalledTimes(1);
+        fireEvent.click(rowOf('Run'));
+        expect(onClick).toHaveBeenCalledTimes(2);
+
+        // The label's own button still runs it once per press, not twice.
+        fireEvent.click(screen.getByRole('button', {name: 'Run'}));
+        expect(onClick).toHaveBeenCalledTimes(3);
+      });
+
+      it('toggles a parent row', () => {
+        render(<TreeList items={underRoot([folder])} />);
+        expect(screen.queryByText('File')).not.toBeInTheDocument();
+        fireEvent.click(rowSurfaceOf('Folder'));
+        expect(screen.getByText('File')).toBeInTheDocument();
+        fireEvent.click(rowOf('Folder'));
+        expect(screen.queryByText('File')).not.toBeInTheDocument();
+      });
+
+      it('does nothing on a disabled action or parent row', () => {
+        const onClick = vi.fn();
+        render(
+          <TreeList
+            items={underRoot([
+              {id: 'run', label: 'Run', onClick, isDisabled: true},
+              {...folder, isDisabled: true},
+            ])}
+          />,
+        );
+        fireEvent.click(rowSurfaceOf('Run'));
+        fireEvent.click(rowOf('Run'));
+        expect(onClick).not.toHaveBeenCalled();
+        fireEvent.click(rowSurfaceOf('Folder'));
+        fireEvent.click(rowOf('Folder'));
+        expect(screen.queryByText('File')).not.toBeInTheDocument();
+      });
+
+      it('leaves a role-based control in start or end content to itself', () => {
+        // Native and role-based controls alike keep their own activation,
+        // the same rule link rows get from the shared enlarged-surface hook.
+        const onClick = vi.fn();
+        const onSwitch = vi.fn();
+        const pin = (name: string) => (
+          <span
+            role="switch"
+            aria-checked="false"
+            aria-label={name}
+            tabIndex={0}
+            onClick={onSwitch}>
+            {name}
+          </span>
+        );
+        render(
+          <TreeList
+            items={underRoot([
+              {
+                id: 'run',
+                label: 'Run',
+                onClick,
+                startContent: pin('Pin run start'),
+                endContent: pin('Pin run end'),
+              },
+              {
+                ...folder,
+                startContent: pin('Pin folder start'),
+                endContent: pin('Pin folder end'),
+              },
+            ])}
+          />,
+        );
+        for (const name of [
+          'Pin run start',
+          'Pin run end',
+          'Pin folder start',
+          'Pin folder end',
+        ]) {
+          fireEvent.click(screen.getByRole('switch', {name}));
+        }
+        expect(onSwitch).toHaveBeenCalledTimes(4);
+        expect(onClick).not.toHaveBeenCalled();
+        expect(screen.queryByText('File')).not.toBeInTheDocument();
+      });
+    });
+
+    it('draws guides above full-width rows without taking pointer input', () => {
+      // Guide columns now sit inside deeper rows' boxes. They paint above the
+      // rows so a row fill never breaks the line, and let clicks fall through
+      // to the row underneath.
+      const {container} = render(<TreeList items={deepItems} />);
+      const guide = container.querySelector('.astryx-tree-list-guide');
+      expect(guide).not.toBeNull();
+      const column = guide!.parentElement!;
+      expect(getComputedStyle(column).pointerEvents).toBe('none');
+      expect(getComputedStyle(column).zIndex).toBe('1');
+      // The tree contains that stacking so a guide cannot climb over
+      // positioned content outside the list.
+      const treeRoot = screen.getByRole('tree').parentElement!;
+      expect(treeRoot.className).toContain('astryx-tree-list');
+      expect(getComputedStyle(treeRoot).isolation).toBe('isolate');
+    });
+
+    it('lifts only rows that draw a focus ring above the guides', () => {
+      // A plain row (no onClick, href or children) draws no focus ring, so it
+      // stays under the guides: a focused selected plain row must not hide
+      // them with its fill (DD3). Rows that draw the ring take the lift.
+      render(
+        <TreeList
+          items={[
+            {
+              id: 'root',
+              label: 'Root',
+              isExpanded: true,
+              children: [
+                {id: 'plain', label: 'Plain', isSelected: true},
+                {id: 'run', label: 'Run', onClick: () => {}},
+              ],
+            },
+          ]}
+        />,
+      );
+      const rowOf = (label: string) =>
+        screen.getByText(label).closest<HTMLElement>('.astryx-tree-list-item')!;
+      expect(rowOf('Plain').className).not.toContain('focusLift');
+      expect(rowOf('Run').className).toContain('focusLift');
+      expect(rowOf('Root').className).toContain('focusLift');
+    });
+
+    it('lifts the focused row above the guides so they never cut its ring', () => {
+      // Each treeitem publishes its own focus as `--_tree-focus-z`, and the
+      // row reads it as its z-index, so the focused row paints above the
+      // guide columns (z-index 1). Nested treeitems redeclare the default.
+      render(<TreeList items={deepItems} />);
+      const rules = collectCssText();
+      expect(rules).toMatch(/--_tree-focus-z:\s*2/);
+      expect(rules).toMatch(/z-index:\s*var\(--_tree-focus-z,\s*auto\)/);
+    });
   });
 
   // ===========================================================================

package/src/TreeList/TreeList.tsx

@@ -83,9 +83,13 @@ export interface TreeListProps extends BaseProps<HTMLDivElement> {
 const styles = stylex.create({
   root: {
     position: 'relative',
+    // Contain the guides' and focused rows' `z-index` (TreeListBranches,
+    // TreeListItem) inside the tree, so they never climb over a sticky header
+    // or other positioned content outside the list.
+    isolation: 'isolate',
     // Per-level indentation step. Public, themeable lever: a theme can retune
     // the tree's indent metric (e.g. to `var(--spacing-5)`) via `defineTheme`
-    // on the `tree-list` target, and both the row margins (TreeListItem) and
+    // on the `tree-list` target, and both the row indents (TreeListItem) and
     // the guide-line offsets (TreeListBranches) read it so they stay aligned.
     '--tree-list-indent': spacingVars['--spacing-4'],
     // Vertical gap between adjacent rows. Public, themeable lever (default

package/src/TreeList/TreeListBranches.tsx

@@ -32,10 +32,16 @@ const BRANCH_MARGIN = `calc(${spacingVars['--spacing-2']} + ${spacingVars['--spa
 const LEVEL_INDENT = 'var(--tree-list-indent)';
 
 const styles = stylex.create({
+  // Rows span the full width of the list and carry their indent inside, so
+  // the guide columns sit inside the row boxes of deeper rows. Lift the guides
+  // above the rows so a hovered or selected row's fill never breaks the line,
+  // and let pointer input fall through to the row underneath.
   container: {
     height: '100%',
     position: 'absolute',
     width: spacingVars['--spacing-5'],
+    zIndex: 1,
+    pointerEvents: 'none',
   },
   verticalLine: {
     borderRadius: 1,

package/src/TreeList/TreeListItem.tsx

@@ -14,7 +14,7 @@
  * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 
-import {useId, useMemo, type ReactNode} from 'react';
+import {useId, useMemo, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -27,6 +27,10 @@ import {
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
+import {
+  hasInteractiveAncestor,
+  useClickableContainer,
+} from '../hooks/useClickableContainer';
 import {Icon} from '../Icon';
 import {mergeProps} from '../utils';
 import {useLinkComponent} from '../Link/useLinkComponent';
@@ -46,6 +50,13 @@ const styles = stylex.create({
     padding: 0,
     position: 'relative',
     width: '100%',
+    // Publish whether THIS treeitem has keyboard focus, for its row's
+    // `zIndex` (see `contentWrapper`). Every nested <li> redeclares the
+    // default, so a focused ancestor never lifts its descendants' rows.
+    '--_tree-focus-z': {
+      default: 'auto',
+      ':focus-visible': '2',
+    },
     // The treeitem row is the roving-tabindex focus owner; suppress the
     // native focus ring in favor of the row's :focus-visible outline below.
     outline: 'none',
@@ -82,6 +93,9 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     gap: spacingVars['--spacing-2'],
+    // The row's own inline padding only. The per-level indent lives on
+    // `indentedContent` inside it, so a theme or caller padding here composes
+    // with the indent instead of replacing it.
     paddingInline: spacingVars['--spacing-2'],
     // No `outline: 'none'` here: this element receives the shared focus ring,
     // which already defaults to none, and the shorthand would erase it.
@@ -89,12 +103,38 @@ const styles = stylex.create({
     position: 'relative',
     boxSizing: 'border-box',
     textAlign: 'start',
-    // Per-level indent. Declared here (not inline) so it lives in
-    // `@layer astryx-base` and the theme layer can override it in normal
-    // cascade order — an inline longhand would outrank every layer. The row
-    // publishes only the computed distance as `--_tree-indent`; the per-level
-    // step is the public `--tree-list-indent` lever (see TreeList `root`).
-    marginInlineStart: 'var(--_tree-indent, 0px)',
+  },
+  // Guide lines draw above the rows (TreeListBranches) so a row's fill does
+  // not break them. Lift the row whose focus ring is showing above the guides
+  // too, so no guide cuts through the ring: when focus is inside the row, or
+  // when its own treeitem publishes focus (`--_tree-focus-z` on `wrapper`).
+  // The ring is the row's outline, so it cannot be lifted on its own: a
+  // focused row that is also filled (selected or hovered) covers the guides at
+  // that row. That is the accepted trade-off (DD3). Applied only with
+  // `focusWithinOrPublished`, the rows that draw the ring: a plain row shows
+  // no ring, so its fill stays under the guides.
+  focusLift: {
+    zIndex: {
+      default: 'var(--_tree-focus-z, auto)',
+      ':has(:focus-visible)': 2,
+    },
+  },
+  // Per-level indent, drawn INSIDE the row box: the row (`contentWrapper`)
+  // stays full width, so a nested row's hover and selected fill spans the
+  // list like a root row's, while its content sits exactly where a margin
+  // indent would put it. A child of the row rather than the row's own padding,
+  // so a theme or caller that sets the row's padding keeps the indent. It
+  // inherits the row's flex alignment and gap, so a theme that retunes those
+  // on `tree-list-item` still lays the content out. The row publishes only the
+  // computed distance as `--_tree-indent`; the per-level step is the public,
+  // themeable `--tree-list-indent` lever (see TreeList `root`).
+  indentedContent: {
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+    alignItems: 'inherit',
+    gap: 'inherit',
+    paddingInlineStart: 'var(--_tree-indent, 0px)',
   },
   interactive: {
     cursor: {
@@ -369,6 +409,7 @@ export function TreeListItem({
   const labelId = useId();
   const descriptionId = useId();
   const LinkComponent = useLinkComponent();
+  const linkRef = useRef<HTMLAnchorElement>(null);
   const isInteractive = onClick != null || href != null;
 
   const handleToggle = useMemo(
@@ -388,8 +429,10 @@ export function TreeListItem({
         if (isDisabled) {
           return;
         }
-        const el = e.target as HTMLElement;
-        if (el.closest('button, a, input, select, textarea')) {
+        // Controls inside the row, native or role-based, keep their own
+        // activation (FR7): the same rule link rows get from the shared
+        // enlarged-surface hook below.
+        if (hasInteractiveAncestor(e.target as Element, e.currentTarget)) {
           return;
         }
         if (onClick != null) {
@@ -402,6 +445,34 @@ export function TreeListItem({
     return undefined;
   }, [onClick, hasChildren, onToggle, id, isDisabled]);
 
+  // A link row (an `href` and no other row action) is an enlarged surface for
+  // its link: the indent is part of the row, so a click anywhere in it must
+  // follow the link, as Enter already does. Built on the shared
+  // enlarged-surface hook (family:navigation-destinations), which skips
+  // clicks on nested controls, native or role-based, and text selections.
+  // - Clicks are delegated: the hook re-dispatches the click on the anchor
+  //   with its modifier keys, so the link component and the browser handle
+  //   same-tab, new-tab and new-window activation, and stops the original, so
+  //   ancestors see one click per press.
+  // - Middle-click has no synthetic equivalent, so it takes the hook's href
+  //   path, which opens the destination in a new tab after the shared
+  //   navigation rule.
+  // The container ref is attached to link rows only, so every other row stays
+  // a plain element and both hook instances stay inert on it.
+  const forwardsToLink = href != null && handleClick == null;
+  const linkRowRef = useRef<HTMLDivElement>(null);
+  const {onClick: delegateToLink} = useClickableContainer({
+    containerRef: linkRowRef,
+    interactiveRef: linkRef,
+    disabled: isDisabled || !forwardsToLink,
+  });
+  const {onMouseUp: openLinkOnMiddleClick} = useClickableContainer({
+    containerRef: linkRowRef,
+    href,
+    target,
+    disabled: isDisabled || !forwardsToLink,
+  });
+
   // Per-level indent distance. The per-level step is the public, themeable
   // `--tree-list-indent` lever (default `--spacing-4`, set on the tree-list
   // root). A leaf adds a fixed chevron-column offset (chevron width + gap) so
@@ -411,8 +482,8 @@ export function TreeListItem({
   // every row sits flush, like a parent at that level. That offset is tied to
   // the chevron's own dimensions, not the indent step, so it does not scale
   // with the lever. Published as the private `--_tree-indent` and consumed by
-  // `contentWrapper`'s stylesheet `margin-inline-start` (kept out of the inline
-  // style so the theme layer can override it — see #4308).
+  // `indentedContent`'s stylesheet `padding-inline-start`; the step stays
+  // themeable through `--tree-list-indent` (see #4308).
   const reservesChevronColumn = !hasChildren && hasExpandableItems;
   const indentDistance = reservesChevronColumn
     ? `calc(${nestedLevel} * var(--tree-list-indent) + ${spacingVars['--spacing-4']} + ${spacingVars['--spacing-2']})`
@@ -521,6 +592,7 @@ export function TreeListItem({
       )}
       {href != null ? (
         <LinkComponent
+          ref={linkRef}
           href={href}
           target={target}
           aria-disabled={isDisabled || undefined}
@@ -599,6 +671,7 @@ export function TreeListItem({
             isInteractive || (hasChildren && onClick == null)
               ? focusOutlineProps.focusWithinOrPublished(
                   styles.contentWrapper,
+                  styles.focusLift,
                   densityStyles[density],
                   styles.interactive,
                   interactionOverlayStyles.backgroundImage,
@@ -620,8 +693,10 @@ export function TreeListItem({
             className,
             {...indentStyle, ...style},
           )}
-          onClick={handleClick}>
-          {innerContent}
+          ref={forwardsToLink ? linkRowRef : undefined}
+          onClick={forwardsToLink ? delegateToLink : handleClick}
+          onMouseUp={forwardsToLink ? openLinkOnMiddleClick : undefined}>
+          <div {...stylex.props(styles.indentedContent)}>{innerContent}</div>
         </div>
       </div>
       {isExpanded && renderedChildren != null && (

package/src/Typeahead/BaseTypeahead.tsx

@@ -624,6 +624,32 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
     sourceGenRef.current = ++searchGenRef.current;
   }
 
+  // The previous source is remembered in state, not a ref, so a render React
+  // discards cannot consume the comparison without its state updates.
+  const [sourceOfState, setSourceOfState] = useState(searchSource);
+  if (sourceOfState !== searchSource) {
+    setSourceOfState(searchSource);
+    if (isLoading) {
+      setIsLoading(false);
+      setHasSearched(false);
+    }
+    loadingRef.current = false;
+  }
+
+  // When the search source is replaced, any in-flight load from the previous
+  // source is abandoned (generation bumped above). Notify the wrapper's busy lane
+  // in an effect so external store listeners run safely after commit.
+  const isInitialMountRef = useRef(true);
+  useEffect(() => {
+    if (isInitialMountRef.current) {
+      isInitialMountRef.current = false;
+      return;
+    }
+    if (!loadingRef.current) {
+      onLoadingChangeRef.current?.(false);
+    }
+  }, [searchSource]);
+
   // Layer for dropdown
   const handleLayerShow = useCallback(() => {
     onOpenChange?.(true);