@astryxdesign/core 0.3.0 → 0.4.0-canary.3112e99

package/src/Pagination/Pagination.test.tsx

@@ -142,6 +142,21 @@ describe('Pagination', () => {
       ).toBe(true);
     });
 
+    it('renders the prev/next caret icons without an extra mirror wrapper span', () => {
+      // Regression: the RTL mirror used to wrap each chevron in a
+      // display:contents span, which dropped the icon out of the button's
+      // flex-centering context and offset the glyph vertically. The mirror now
+      // rides on the Icon via xstyle, so the icon renders as a direct centered
+      // child. jsdom has no layout engine to assert the pixel centering, but we
+      // can assert the structural fix: the icon carries its own class and is
+      // not the lone child of a bare wrapper span. (Centering is verified
+      // visually in Storybook.)
+      render(<Pagination page={3} onChange={() => {}} totalPages={5} />);
+      const next = screen.getByRole('button', {name: 'Go to next page'});
+      const icon = next.querySelector('.astryx-icon');
+      expect(icon).not.toBeNull();
+    });
+
     it('renders with data-testid', () => {
       render(
         <Pagination
@@ -557,7 +572,7 @@ describe('Pagination', () => {
       );
       const box = screen.getByRole('spinbutton', {name: 'Go to page'});
       expect(box).toBeInTheDocument();
-      expect(box).toHaveValue(3);
+      expect(box).toHaveValue('3');
       // Visible leading "Page" label and trailing "/ N" total (10 pages).
       expect(screen.getByText('Page')).toBeInTheDocument();
       expect(screen.getByText('/ 10')).toBeInTheDocument();
@@ -594,8 +609,8 @@ describe('Pagination', () => {
       // The box is a NumberInput (a spinbutton) whose min/max clamp entries to
       // the valid page range without hand-rolled parsing in Pagination.
       const box = screen.getByRole('spinbutton', {name: 'Go to page'});
-      expect(box).toHaveAttribute('min', '1');
-      expect(box).toHaveAttribute('max', '10');
+      expect(box).toHaveAttribute('aria-valuemin', '1');
+      expect(box).toHaveAttribute('aria-valuemax', '10');
     });
 
     it('commits a typed page on Enter and rejects an over-range entry', async () => {
@@ -661,13 +676,13 @@ describe('Pagination', () => {
       await user.type(box, 'abc');
       await user.tab();
       expect(onChange).not.toHaveBeenCalled();
-      expect(box).toHaveValue(3);
+      expect(box).toHaveValue('3');
 
       // Emptying the box and blurring reverts to the committed page too.
       await user.clear(box);
       await user.tab();
       expect(onChange).not.toHaveBeenCalled();
-      expect(box).toHaveValue(3);
+      expect(box).toHaveValue('3');
     });
 
     it('announces the committed page to screen readers', async () => {
@@ -785,7 +800,7 @@ describe('Pagination', () => {
       );
       const box = screen.getByRole('spinbutton', {name: 'Go to page'});
       // The box holds the page number, and committing drives page navigation.
-      expect(box).toHaveValue(1);
+      expect(box).toHaveValue('1');
       await user.clear(box);
       await user.type(box, '4{Enter}');
       expect(onChange).toHaveBeenCalledWith(4);
@@ -956,7 +971,7 @@ describe('Pagination', () => {
         // The box still holds the 1-based page number.
         expect(
           screen.getByRole('spinbutton', {name: 'Go to page'}),
-        ).toHaveValue(3);
+        ).toHaveValue('3');
       });
 
       it('keeps the input page-navigating with a custom label', async () => {

package/src/Pagination/Pagination.tsx

@@ -43,6 +43,7 @@ import {useListFocus} from '../hooks/useListFocus';
 import {mergeProps, rtlStyles} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {useTranslator} from '../i18n/useTranslator';
 import type {PaginationVariantMap} from './index';
 
@@ -165,6 +166,9 @@ export interface PaginationProps extends Omit<
 // Styles
 // =============================================================================
 
+/** Width (px) of the page-size Selector field. */
+const PAGE_SIZE_SELECTOR_WIDTH = 80;
+
 const styles = stylex.create({
   root: {
     display: 'flex',
@@ -214,14 +218,6 @@ const styles = stylex.create({
     transitionProperty: 'background-color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
   },
   dotSm: {
     width: spacingVars['--spacing-1-5'],
@@ -265,9 +261,6 @@ const styles = stylex.create({
     alignItems: 'center',
     gap: spacingVars['--spacing-2'],
   },
-  pageSizeSelectorControl: {
-    width: 80,
-  },
   disabled: {
     opacity: 0.5,
     pointerEvents: 'none' as const,
@@ -702,7 +695,7 @@ export function Pagination({
                       active: isActive ? 'active' : null,
                       size,
                     }),
-                    stylex.props(
+                    focusOutlineProps.focusVisible(
                       styles.dot,
                       isSm && styles.dotSm,
                       isActive && styles.dotActive,
@@ -791,17 +784,19 @@ export function Pagination({
       data-testid={testId}>
       {pageSizeOptions != null && pageSizeOptions.length > 0 && (
         <div {...stylex.props(styles.pageSizeSelector)}>
-          <div {...stylex.props(styles.pageSizeSelectorControl)}>
-            <Selector
-              label={itemsPerPageLabel}
-              isLabelHidden
-              options={pageSizeOptions.map(opt => String(opt))}
-              value={String(pageSize)}
-              onChange={handlePageSizeChange}
-              size={buttonSize}
-              isDisabled={isDisabled}
-            />
-          </div>
+          <Selector
+            label={itemsPerPageLabel}
+            isLabelHidden
+            options={pageSizeOptions.map(opt => String(opt))}
+            value={String(pageSize)}
+            onChange={handlePageSizeChange}
+            size={buttonSize}
+            isDisabled={isDisabled}
+            // `width`, not `xstyle`: Selector's xstyle lands on the trigger
+            // box, while `width` sizes the whole field — which is what the
+            // removed wrapper did.
+            width={PAGE_SIZE_SELECTOR_WIDTH}
+          />
         </div>
       )}
       <div {...stylex.props(styles.controls)}>
@@ -812,9 +807,11 @@ export function Pagination({
             variant="ghost"
             size={buttonSize}
             icon={
-              <span {...stylex.props(rtlStyles.mirror)}>
-                <Icon icon="chevronsLeft" size={isSm ? 'sm' : 'md'} />
-              </span>
+              <Icon
+                icon="chevronsLeft"
+                size={isSm ? 'sm' : 'md'}
+                xstyle={rtlStyles.mirror}
+              />
             }
             onClick={handleFirst}
             isDisabled={isDisabled || !hasPrevious}
@@ -828,9 +825,11 @@ export function Pagination({
           variant="ghost"
           size={buttonSize}
           icon={
-            <span {...stylex.props(rtlStyles.mirror)}>
-              <Icon icon="chevronLeft" size={isSm ? 'sm' : 'md'} />
-            </span>
+            <Icon
+              icon="chevronLeft"
+              size={isSm ? 'sm' : 'md'}
+              xstyle={rtlStyles.mirror}
+            />
           }
           onClick={handlePrevious}
           isDisabled={isDisabled || !hasPrevious}
@@ -845,9 +844,11 @@ export function Pagination({
           variant="ghost"
           size={buttonSize}
           icon={
-            <span {...stylex.props(rtlStyles.mirror)}>
-              <Icon icon="chevronRight" size={isSm ? 'sm' : 'md'} />
-            </span>
+            <Icon
+              icon="chevronRight"
+              size={isSm ? 'sm' : 'md'}
+              xstyle={rtlStyles.mirror}
+            />
           }
           onClick={handleNext}
           isDisabled={isDisabled || !hasNext}
@@ -861,9 +862,11 @@ export function Pagination({
             variant="ghost"
             size={buttonSize}
             icon={
-              <span {...stylex.props(rtlStyles.mirror)}>
-                <Icon icon="chevronsRight" size={isSm ? 'sm' : 'md'} />
-              </span>
+              <Icon
+                icon="chevronsRight"
+                size={isSm ? 'sm' : 'md'}
+                xstyle={rtlStyles.mirror}
+              />
             }
             onClick={handleLast}
             isDisabled={isDisabled || !hasNext}

package/src/Popover/Popover.doc.mjs

@@ -133,6 +133,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-popover'},
+      {className: 'astryx-popover-surface'},
     ],
     vars: [
       {name: '--_popover-radius', description: 'Border radius of the popover', default: 'var(--radius-element)', private: true},
@@ -277,6 +278,7 @@ export const docsZh = {
   theming: {
     targets: [
       {className: 'astryx-popover'},
+      {className: 'astryx-popover-surface'},
     ],
     vars: [
       {name: '--_popover-radius', description: 'Border radius of the popover', default: 'var(--radius-element)', private: true},

package/src/Popover/Popover.tsx

@@ -250,10 +250,6 @@ const styles = stylex.create({
     paddingInlineStart: spacingVars['--spacing-3'],
     paddingInlineEnd: spacingVars['--spacing-3'],
   },
-  gap: {
-    marginBlockStart: spacingVars['--spacing-1'],
-    marginBlockEnd: spacingVars['--spacing-1'],
-  },
   customWidth: (width: string | number) => ({
     width: typeof width === 'number' ? `${width}px` : width,
   }),
@@ -529,7 +525,8 @@ export function Popover({
           {
             placement,
             alignment,
-            xstyle: [popoverXstyle, styles.gap, layerAnimations[placement]],
+            offset: spacingVars['--spacing-1'],
+            xstyle: [popoverXstyle, layerAnimations[placement]],
           },
         )}
       </>
@@ -565,7 +562,8 @@ export function Popover({
           {
             placement,
             alignment,
-            xstyle: [popoverXstyle, styles.gap, layerAnimations[placement]],
+            offset: spacingVars['--spacing-1'],
+            xstyle: [popoverXstyle, layerAnimations[placement]],
           },
         )}
       </>
@@ -594,7 +592,8 @@ export function Popover({
         {
           placement,
           alignment,
-          xstyle: [popoverXstyle, styles.gap, layerAnimations[placement]],
+          offset: spacingVars['--spacing-1'],
+          xstyle: [popoverXstyle, layerAnimations[placement]],
         },
       )}
     </>

package/src/Popover/usePopover.tsx

@@ -30,6 +30,9 @@ import {Button} from '../Button';
 import {rtlStyles} from '../utils';
 import {useTranslator} from '../i18n';
 import {useDevWarning} from '../hooks/useDevWarning';
+import {mergeProps} from '../utils/mergeProps';
+import {themeProps} from '../utils/themeProps';
+import {stableClassName} from '../naming';
 
 const styles = stylex.create({
   // Default popover surface — background, radius, shadow.
@@ -187,6 +190,22 @@ export interface UsePopoverOptions {
    * @default true
    */
   hasSurface?: boolean;
+
+  /**
+   * Theme-target name stamped on the popup SURFACE — the element that paints
+   * the background, radius and elevation — without the `astryx-` prefix
+   * (e.g. `'complex-selector-popup'`).
+   *
+   * The surface is created here, not by the calling component, so a component
+   * that wants its popup themeable cannot reach it on its own: a target it
+   * renders itself lands on its content INSIDE the surface, where a background
+   * or radius rule paints the wrong box. Name the surface through this option
+   * and document the class in the component's `theming.targets`.
+   *
+   * The shared `astryx-popover-surface` class is always present alongside it,
+   * so a theme can style every popup surface at once.
+   */
+  surfaceTarget?: string;
 }
 
 /**
@@ -312,6 +331,7 @@ export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
     hasEscapeDismiss = true,
     hasAutoFocus = true,
     hasSurface = true,
+    surfaceTarget,
     hasCloseButton = true,
     closeButtonLabel: closeButtonLabelFromProps,
     dialogLabel,
@@ -406,16 +426,28 @@ export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
   // Wrapped render function that includes surface styles and optional hidden close button
   const render = useCallback(
     (children: ReactNode, props?: ContextRenderProps): ReactNode => {
+      // `mergeProps` is positional — a third OBJECT argument is read as
+      // `style`, not as more props — so the surface's classes are composed
+      // into one props object before merging with the StyleX result.
+      const surfaceProps = themeProps('popover-surface');
+      const surfaceClassName =
+        surfaceTarget != null
+          ? `${surfaceProps.className} ${stableClassName(surfaceTarget)}`
+          : surfaceProps.className;
+
       return layer.render(
         <div
           ref={contentRef}
           role={role === 'dialog' ? 'dialog' : undefined}
           aria-modal={role === 'dialog' && isModal ? true : undefined}
           aria-label={role === 'dialog' ? dialogLabel : undefined}
-          {...stylex.props(
-            styles.contentWrapper,
-            hasSurface && styles.surface,
-            xstyle,
+          {...mergeProps(
+            {...surfaceProps, className: surfaceClassName},
+            stylex.props(
+              styles.contentWrapper,
+              hasSurface && styles.surface,
+              xstyle,
+            ),
           )}>
           {children}
           {hasCloseButton && (
@@ -439,6 +471,7 @@ export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
       layer,
       hasCloseButton,
       hasSurface,
+      surfaceTarget,
       closeButtonLabel,
       contentRef,
       dialogLabel,

package/src/PowerSearch/PowerSearch.tsx

@@ -104,7 +104,6 @@ const popoverLayerStyles = stylex.create({
   layer: {
     width: 'anchor-size(width)',
     minWidth: 400,
-    marginTop: spacingVars['--spacing-1'],
   },
 });
 
@@ -1053,6 +1052,7 @@ export function PowerSearch({
       {popover.render(popoverContent, {
         placement: 'below',
         alignment: 'start',
+        offset: spacingVars['--spacing-1'],
         xstyle: [popoverLayerStyles.layer, layerAnimations.below],
       })}
     </>

package/src/PowerSearch/PowerSearchEditPopover.test.tsx

@@ -283,4 +283,46 @@ describe('PowerSearch', () => {
     // onSave should NOT be called because the event was already consumed (defaultPrevented)
     expect(onSave).not.toHaveBeenCalled();
   });
+
+  it('does not save/close on a composing Enter while typing a filter value (#4828)', () => {
+    const onSave = vi.fn();
+    const onCancel = vi.fn();
+
+    function StringValueHarness() {
+      const internalConfig = useInternalConfig(testConfig);
+      return (
+        <PowerSearchEditPopover
+          config={internalConfig}
+          filter={{
+            field: 'status',
+            operator: 'is',
+            value: {type: 'string', value: '한국어'},
+          }}
+          mode="edit"
+          onSave={onSave}
+          onCancel={onCancel}
+        />
+      );
+    }
+
+    const {container} = render(<StringValueHarness />);
+    const input = container.querySelector('input');
+    expect(input).not.toBeNull();
+
+    // Same composing-Enter signal as BaseTypeahead's guard: isComposing
+    // (modern) or legacy keyCode 229. An IME commits its composition on
+    // Enter too, so this keydown must not also close/save the popover.
+    // handleKeyDown is bound on an ancestor container div, so the keydown
+    // reaches it the same way it would from any real input inside — same
+    // dispatch mechanism the sibling defaultPrevented test above uses.
+    fireEvent.keyDown(input!, {key: 'Enter', isComposing: true});
+    expect(onSave).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(input!, {key: 'Enter', keyCode: 229});
+    expect(onSave).not.toHaveBeenCalled();
+
+    // A real, non-composing Enter still saves normally.
+    fireEvent.keyDown(input!, {key: 'Enter'});
+    expect(onSave).toHaveBeenCalledTimes(1);
+  });
 });

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -20,6 +20,7 @@ import {HStack, VStack} from '../Stack';
 import {Icon} from '../Icon';
 import {TreeList, type TreeListItemData} from '../TreeList';
 import {useTranslator} from '../i18n';
+import {isImeKeyEvent} from '../hooks/useFocusTrap';
 import {spacingVars, typeScaleVars} from '../theme/tokens.stylex';
 import {PowerSearchValueEditor} from './PowerSearchValueEditor';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
@@ -702,6 +703,12 @@ export function PowerSearchEditPopover({
   // Handle Enter to save, Escape to cancel
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      // Don't treat an IME composition-commit Enter as save-to-close --
+      // typing a CJK filter value and pressing Enter to confirm the
+      // composition would otherwise close the popover mid-composition.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       if (e.key === 'Enter' && !isSaveDisabled && !e.defaultPrevented) {
         e.preventDefault();
         handleSave();

package/src/ProgressBar/ProgressBar.doc.mjs

@@ -60,7 +60,7 @@ export const docs = {
       name: 'marks',
       type: 'ReadonlyArray<{value: number; label: string}>',
       description:
-        'Fixed target marks drawn on the track at values in the same 0..max scale as value (e.g. a goal line). They stay visible whether progress is below or past them. Each mark requires a label — it is the mark\'s accessible name and the text revealed via a tooltip on hover/focus. Ignored when indeterminate.',
+        'Fixed target marks drawn on the track at values in the same 0..max scale as value (e.g. a goal line). They stay visible whether progress is below or past them, and take their color from what they sit on: a mark inside the filled area uses the fill variant\'s on-color (on-accent, on-warning, on-error, and so on), a mark still out on the bare track uses the primary text color (the secondary one on a disabled bar, which dims everything it draws). Each mark requires a label: it is the mark\'s accessible name and the text revealed via a tooltip on hover/focus. Ignored when indeterminate.',
     },
     {
       name: 'isDisabled',
@@ -80,7 +80,18 @@ export const docs = {
       {className: 'astryx-progressbar', visualProps: ['variant']},
       {className: 'astryx-progressbar-fill', visualProps: ['variant']},
       {className: 'astryx-progressbar-track'},
-      {className: 'astryx-progressbar-mark'},
+      {
+        className: 'astryx-progressbar-mark',
+        visualProps: ['variant', 'placement'],
+      },
+    ],
+    vars: [
+      {name: '--_progressbar-mark-width', description: 'Target mark tick width', default: '2px', private: true},
+      {name: '--_progressbar-mark-height', description: 'Target mark tick height', default: '8px', private: true},
+    ],
+    derived: [
+      {property: 'width', vars: ['--_progressbar-mark-width'], replaces: true},
+      {property: 'height', vars: ['--_progressbar-mark-height'], replaces: true},
     ],
   },
   usage: {
@@ -154,7 +165,7 @@ export const docsZh = {
       name: 'marks',
       type: 'ReadonlyArray<{value: number; label: string}>',
       description:
-        '在轨道上按与 value 相同的 0..max 刻度绘制的固定目标标记（例如目标线）。无论进度低于还是超过它们都保持可见。每个标记都必须提供 label——它既是标记的无障碍名称，也是悬停/聚焦时通过工具提示显示的文本。不确定模式下忽略。',
+        '在轨道上按与 value 相同的 0..max 刻度绘制的固定目标标记（例如目标线）。无论进度低于还是超过它们都保持可见，并根据所处位置取色：位于已填充区域内的标记使用与填充变体配对的前景色（on-accent、on-warning、on-error 等），仍位于空轨道上的标记使用主文本颜色（禁用状态下会降为次要文本颜色，与其整体弱化的呈现保持一致）。每个标记都必须提供 label——它既是标记的无障碍名称，也是悬停/聚焦时通过工具提示显示的文本。不确定模式下忽略。',
     },
     {
       name: 'isDisabled',
@@ -174,7 +185,18 @@ export const docsZh = {
       {className: 'astryx-progressbar', visualProps: ['variant']},
       {className: 'astryx-progressbar-fill', visualProps: ['variant']},
       {className: 'astryx-progressbar-track'},
-      {className: 'astryx-progressbar-mark'},
+      {
+        className: 'astryx-progressbar-mark',
+        visualProps: ['variant', 'placement'],
+      },
+    ],
+    vars: [
+      {name: '--_progressbar-mark-width', description: '目标标记刻度宽度', default: '2px', private: true},
+      {name: '--_progressbar-mark-height', description: '目标标记刻度高度', default: '8px', private: true},
+    ],
+    derived: [
+      {property: 'width', vars: ['--_progressbar-mark-width'], replaces: true},
+      {property: 'height', vars: ['--_progressbar-mark-height'], replaces: true},
     ],
   },
   usage: {
@@ -216,7 +238,7 @@ export const docsDense = {
     formatValueLabel: 'Custom value label formatter; defaults to percentage string.',
     variant: 'Semantic color variant.',
     isIndeterminate: 'Animated loading indicator for unknown progress.',
-    marks: 'Fixed target marks ({value, label?}) drawn on the track in the 0..max scale; stay visible past the fill. A label reveals a tooltip on hover/focus. Ignored when indeterminate.',
+    marks: 'Fixed target marks ({value, label?}) drawn on the track in the 0..max scale; stay visible past the fill. Marks inside the fill take the variant on-color; marks on the bare track take the primary text color (secondary when disabled). A label reveals a tooltip on hover/focus. Ignored when indeterminate.',
     isDisabled: 'Visually disabled: grays out fill and text.',
     xstyle: 'StyleX styles for layout customization. Must be stylex.create() value.',
   },