fix: update select component

Author: wangdicoder

apps/docs/src/containers/theme-studio/index.tsx

@@ -156,6 +156,12 @@ const ThemeStudioPage = (): React.ReactElement => {
             <Select
               className="theme-studio__select"
               value={draft.presetId}
+              showSearch
+              filterOption={(inputValue, option) => {
+                const query = inputValue.toLowerCase();
+                const label = typeof option.label === 'string' ? option.label : '';
+                return label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query);
+              }}
               onChange={(value) => handlePresetChange(value)}
             >
               {THEME_EDITOR_PRESETS.map((preset) => (

apps/docs/src/containers/theme-studio/runtime-presets.ts

@@ -18,7 +18,14 @@ function buildPresetDescription(source: TweakcnRuntimePresetSource): string {
     : 'Imported from tweakcn runtime preset.';
 }
 
-function mapRuntimeStylesToFields(styles: RuntimeStyles): Partial<ThemeEditorFields> {
+function readRuntimeStyle(styles: RuntimeStyles, key: string, fallbackStyles?: RuntimeStyles): string | undefined {
+  return styles[key] ?? fallbackStyles?.[key];
+}
+
+function mapRuntimeStylesToFields(
+  styles: RuntimeStyles,
+  typographyFallbackStyles?: RuntimeStyles,
+): Partial<ThemeEditorFields> {
   const radius = styles.radius ?? DEFAULT_FIELDS.radius;
   const ring = styles.ring ?? styles.primary ?? DEFAULT_FIELDS.ring;
   const statusPalette = deriveStatusPalette(styles);
@@ -62,9 +69,9 @@ function mapRuntimeStylesToFields(styles: RuntimeStyles): Partial<ThemeEditorFie
     sidebarAccentForeground: styles['sidebar-accent-foreground'] ?? DEFAULT_FIELDS.sidebarAccentForeground,
     sidebarBorder: styles['sidebar-border'] ?? DEFAULT_FIELDS.sidebarBorder,
     sidebarRing: styles['sidebar-ring'] ?? DEFAULT_FIELDS.sidebarRing,
-    fontSans: styles['font-sans'] ?? DEFAULT_FIELDS.fontSans,
-    fontMono: styles['font-mono'] ?? DEFAULT_FIELDS.fontMono,
-    letterSpacing: styles['letter-spacing'] ?? DEFAULT_FIELDS.letterSpacing,
+    fontSans: readRuntimeStyle(styles, 'font-sans', typographyFallbackStyles) ?? DEFAULT_FIELDS.fontSans,
+    fontMono: readRuntimeStyle(styles, 'font-mono', typographyFallbackStyles) ?? DEFAULT_FIELDS.fontMono,
+    letterSpacing: readRuntimeStyle(styles, 'letter-spacing', typographyFallbackStyles) ?? DEFAULT_FIELDS.letterSpacing,
     radius,
     shadowCard: buildShadow(styles),
     shadowFocus: `0 0 0 3px ${toRgba(ring, 0.24)}`,
@@ -78,7 +85,7 @@ function buildPresetFromRuntimeSource(source: TweakcnRuntimePresetSource): Theme
   const lightStyles = source.styles.light;
   const darkStyles = source.styles.dark;
   const lightFields = mapRuntimeStylesToFields(lightStyles);
-  const darkFields = mapRuntimeStylesToFields(darkStyles);
+  const darkFields = mapRuntimeStylesToFields(darkStyles, lightStyles);
 
   return {
     id: source.id,

apps/docs/src/containers/theme-studio/theme-studio.scss

@@ -92,7 +92,7 @@
 }
 
 .theme-studio__topbar-actions .theme-studio__select {
-  min-width: 180px;
+  width: 220px;
 }
 
 .theme-studio__eyebrow {

packages/react/src/popup/__tests__/popup.test.tsx

@@ -1,18 +1,73 @@
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { createPopper } from '@popperjs/core';
 import Popup from '../index';
 
+jest.mock('@popperjs/core', () => ({
+  createPopper: jest.fn(),
+}));
+
 describe('<Popup />', () => {
+  beforeEach(() => {
+    (createPopper as jest.Mock).mockImplementation(
+      (_target: HTMLElement, popup: HTMLElement, options) => {
+        const applyReactStyles = () => {
+          options.modifiers
+            .find((modifier: { name: string }) => modifier.name === 'reactApplyStyles')
+            ?.fn({
+              state: {
+                styles: {
+                  popper: {
+                    position: 'absolute',
+                    left: '37px',
+                    top: '575px',
+                    margin: '0px',
+                  },
+                  arrow: {
+                    position: 'absolute',
+                    left: '8px',
+                  },
+                },
+                attributes: {
+                  popper: {
+                    'data-popper-placement': 'bottom',
+                  },
+                  arrow: {},
+                },
+              },
+            });
+        };
+        return {
+          state: {
+            elements: {
+              popper: popup,
+            },
+          },
+          forceUpdate: jest.fn(applyReactStyles),
+          destroy: jest.fn(),
+        };
+      }
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should match the snapshot', () => {
     const { asFragment } = render(
-      <Popup content="Popup content"><button>Trigger</button></Popup>
+      <Popup content="Popup content">
+        <button>Trigger</button>
+      </Popup>
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render trigger element', () => {
     const { getByText } = render(
-      <Popup content="Content"><button>Trigger</button></Popup>
+      <Popup content="Content">
+        <button>Trigger</button>
+      </Popup>
     );
     expect(getByText('Trigger')).toBeInTheDocument();
   });
@@ -54,4 +109,28 @@ describe('<Popup />', () => {
 
     expect(screen.getByText('Controlled popup')).toBeInTheDocument();
   });
+
+  it('should keep popup content mounted during exit transition', () => {
+    const { rerender } = render(
+      <Popup visible={true} trigger="manual" content={<div>Controlled popup</div>}>
+        <button>Trigger</button>
+      </Popup>
+    );
+
+    const openPopup = document.querySelector('.ty-popup') as HTMLDivElement;
+    expect(openPopup.style.left).toBe('37px');
+    expect(openPopup.style.top).toBe('575px');
+
+    rerender(
+      <Popup visible={false} trigger="manual" content={<div>Controlled popup</div>}>
+        <button>Trigger</button>
+      </Popup>
+    );
+
+    const closingPopup = document.querySelector('.ty-popup') as HTMLDivElement;
+    expect(closingPopup).toBeInTheDocument();
+    expect(screen.getByText('Controlled popup')).toBeInTheDocument();
+    expect(closingPopup.style.left).toBe('37px');
+    expect(closingPopup.style.top).toBe('575px');
+  });
 });