@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

package/src/OverflowList/OverflowList.tsx

@@ -18,12 +18,20 @@
  * - /packages/cli/assets/templates/blocks/components/OverflowList/ (showcase blocks)
  */
 
-import {type ReactNode, type ReactElement, Children} from 'react';
+import {
+  type ReactNode,
+  type ReactElement,
+  Children,
+  useCallback,
+  useRef,
+  useState,
+} from 'react';
 import type {BaseProps} from '../BaseProps';
 import type {SpacingStep} from '../utils/types';
 import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
 import {useOverflow} from '../hooks/useOverflow';
+import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {spacingVars} from '../theme/tokens.stylex';
 import {themeProps} from '../utils/themeProps';
 
@@ -187,6 +195,47 @@ export interface OverflowListProps extends BaseProps<HTMLDivElement> {
    * ```
    */
   overflowRenderer?: (overflowItems: OverflowItem[]) => ReactNode;
+
+  /**
+   * Called with the items that are currently collapsed, whenever that set
+   * changes.
+   *
+   * Use it when the collapsed items belong in a menu the surrounding UI
+   * already renders (a row that already has its own "…" button), so the list
+   * does not grow a second anchor beside it. `overflowRenderer` cannot serve
+   * that case: it is only rendered while items overflow, and its measurement
+   * copy always receives every item.
+   *
+   * The contract:
+   * - It fires once measurement has collapsed something, and again with an
+   *   empty array once the row widens back out and everything fits.
+   * - It is **silent while nothing overflows** — including on mount, so a list
+   *   that fits from the start never calls it. There is no report of the
+   *   pre-measurement state, which would always be an empty set whether or not
+   *   the row actually overflows. Hold the collapsed set in state initialised
+   *   to `[]` and it is correct at every moment; if you remount the list while
+   *   keeping that state, reset it yourself.
+   * - Reports are keyed on the collapsed items' original indices and React
+   *   keys. Membership and order changes report even when the count stays the
+   *   same; unrelated re-renders and callback identity changes do not.
+   *
+   * Give dynamic children stable React keys. Items include their current
+   * original `index`; use it to look up your own data rather than storing
+   * `child`.
+   *
+   * @example
+   * ```
+   * const [hidden, setHidden] = useState<OverflowItem[]>([]);
+   * <>
+   *   <OverflowList onOverflowChange={setHidden}>{items}</OverflowList>
+   *   <DropdownMenu
+   *     button={{label: 'More', variant: 'ghost'}}
+   *     items={[...alwaysThere, ...hidden.map(({index}) => actions[index])]}
+   *   />
+   * </>
+   * ```
+   */
+  onOverflowChange?: (overflowItems: OverflowItem[]) => void;
 }
 
 /**
@@ -219,6 +268,7 @@ export function OverflowList({
   collapseFrom = 'end',
   behavior = 'observeSelf',
   overflowRenderer,
+  onOverflowChange,
   xstyle,
   className,
   style,
@@ -263,11 +313,59 @@ export function OverflowList({
   // so the indicator renders at its maximum possible width.
   const measureIndicator = overflowRenderer?.(allItems);
 
+  // Re-run measurement when keyed children change without resizing the row.
+  // The measured key delays reporting until that measurement has committed.
+  // Lists without the callback skip all identity work.
+  const measurementKey = onOverflowChange
+    ? JSON.stringify({
+        children: childArray.map((child, index) => [index, child.key]),
+        gap,
+        minVisibleItems,
+        maxVisibleItems,
+        maxRows,
+        collapseFrom,
+        behavior,
+      })
+    : '';
+  const [measuredKey, setMeasuredKey] = useState(measurementKey);
+  const reportMeasureRef = useCallback(
+    (element: HTMLElement | null) => {
+      measureRef(element);
+      if (element) {
+        setMeasuredKey(measurementKey);
+      }
+    },
+    [measureRef, measurementKey],
+  );
+
+  // Report after measurement, before paint, so a standing menu updates in the
+  // same frame as the visible row. Keys distinguish membership and order while
+  // suppressing callback-only or unrelated re-renders. The initial empty key
+  // suppresses the optimistic pre-measurement render.
+  const overflowKey = onOverflowChange
+    ? JSON.stringify(overflowItems.map(({child, index}) => [index, child.key]))
+    : '[]';
+  const reportedKeyRef = useRef('[]');
+  const overflowItemsRef = useRef(overflowItems);
+  overflowItemsRef.current = overflowItems;
+
+  useIsomorphicLayoutEffect(() => {
+    if (
+      !onOverflowChange ||
+      measuredKey !== measurementKey ||
+      reportedKeyRef.current === overflowKey
+    ) {
+      return;
+    }
+    reportedKeyRef.current = overflowKey;
+    onOverflowChange(overflowItemsRef.current);
+  }, [measuredKey, measurementKey, overflowKey, onOverflowChange]);
+
   return (
     <>
       {/* Hidden measurement container */}
       <div
-        ref={measureRef}
+        ref={reportMeasureRef}
         aria-hidden="true"
         inert
         {...stylex.props(styles.measureContainer, gapStyles[gap])}>

package/src/Pagination/Pagination.test.tsx

@@ -613,7 +613,7 @@ describe('Pagination', () => {
       expect(box).toHaveAttribute('aria-valuemax', '10');
     });
 
-    it('commits a typed page on Enter and rejects an over-range entry', async () => {
+    it('commits a typed page on Enter and clamps an over-range entry', async () => {
       const user = userEvent.setup();
       const onChange = vi.fn();
       render(
@@ -633,9 +633,10 @@ describe('Pagination', () => {
       onChange.mockClear();
       await user.clear(box);
       // The box is a NumberInput bounded to [1, totalPages]: an over-max entry
-      // is rejected and never navigates past the last page.
+      // lands on the last page rather than navigating past it.
       await user.type(box, '99{Enter}');
       expect(onChange).not.toHaveBeenCalledWith(99);
+      expect(onChange).toHaveBeenCalledWith(10);
     });
 
     it('commits on blur', async () => {

package/src/Popover/Popover.doc.mjs

@@ -136,7 +136,7 @@ export const docs = {
       {className: 'astryx-popover-surface'},
     ],
     vars: [
-      {name: '--_popover-radius', description: 'Border radius of the popover', default: 'var(--radius-element)', private: true},
+      {name: '--_popover-radius', description: 'Border radius of the popover surface', default: 'var(--radius-container)', private: true},
     ],
     derived: [
       {property: 'borderRadius', vars: ['--_popover-radius']},
@@ -281,7 +281,7 @@ export const docsZh = {
       {className: 'astryx-popover-surface'},
     ],
     vars: [
-      {name: '--_popover-radius', description: 'Border radius of the popover', default: 'var(--radius-element)', private: true},
+      {name: '--_popover-radius', description: 'Border radius of the popover surface', default: 'var(--radius-container)', private: true},
     ],
     derived: [
       {property: 'borderRadius', vars: ['--_popover-radius']},

package/src/Popover/Popover.test.tsx

@@ -14,6 +14,7 @@ import {describe, it, expect, vi, beforeAll, afterAll} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
 import React, {useRef} from 'react';
 import {Popover} from './Popover';
+import type {UsePopoverReturn} from './usePopover';
 import {Dialog} from '../Dialog';
 import {SegmentedControl, SegmentedControlItem} from '../SegmentedControl';
 
@@ -55,6 +56,19 @@ afterAll(() => {
   (HTMLElement.prototype as any).matches = originalMatches;
 });
 
+describe('usePopover public return type', () => {
+  it('keeps dismissal internals out of the public contract', () => {
+    const hasKeepOpenProps: 'keepOpenProps' extends keyof UsePopoverReturn
+      ? true
+      : false = false;
+    const hasDismissalGuard: 'wasJustDismissed' extends keyof UsePopoverReturn
+      ? true
+      : false = false;
+    expect(hasKeepOpenProps).toBe(false);
+    expect(hasDismissalGuard).toBe(false);
+  });
+});
+
 describe('Popover', () => {
   it('renders trigger element', () => {
     render(
@@ -486,4 +500,28 @@ describe('Popover', () => {
       expect(trigger).toHaveFocus();
     });
   });
+
+  it('puts the theme target and styling escape hatches on the popup surface', () => {
+    render(
+      <Popover
+        isOpen
+        content={<span data-testid="content">Popover content</span>}
+        label="Test popover"
+        data-testid="popover"
+        className="consumer-popover"
+        style={{padding: 0}}>
+        <button type="button">Open</button>
+      </Popover>,
+    );
+
+    const target = document.querySelector('.astryx-popover');
+    expect(target).not.toBeNull();
+    // The surface paints background, radius and elevation; a target on the
+    // content box inside it would style a box that paints nothing.
+    expect(target).toHaveClass('astryx-popover-surface');
+    expect(target).toHaveClass('consumer-popover');
+    expect(target).toHaveStyle({padding: '0'});
+    expect(target).toContainElement(screen.getByTestId('content'));
+    expect(screen.getByTestId('popover')).not.toHaveClass('consumer-popover');
+  });
 });

package/src/Popover/Popover.tsx

@@ -25,7 +25,6 @@ import React, {
 } from 'react';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import * as stylex from '@stylexjs/stylex';
-import {mergeProps} from '../utils';
 import {devWarn} from '../utils/devWarning';
 import type {BaseProps} from '../BaseProps';
 import {usePopover} from './usePopover';
@@ -33,7 +32,6 @@ import type {LayerAlignment, LayerPlacement} from '../Layer/useLayer';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {spacingVars} from '../theme/tokens.stylex';
 import {InteractiveRoleContext} from '../InteractiveRoleContext/InteractiveRoleContext';
-import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Helpers
@@ -243,7 +241,8 @@ const styles = stylex.create({
   anchorWrapper: {
     display: 'inline-flex',
   },
-  // Visual styles for the inner content container
+  // Content padding, applied to the popup surface so a theme's `padding`
+  // replaces it instead of nesting inside it.
   contentPadding: {
     paddingBlockStart: spacingVars['--spacing-3'],
     paddingBlockEnd: spacingVars['--spacing-3'],
@@ -322,16 +321,12 @@ export function Popover({
 }: PopoverProps): ReactElement {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const isControlled = isOpen !== undefined;
-  // Track when the popover was last hidden by light dismiss to prevent
-  // the trigger click from immediately re-opening it.
-  const lastHideTimeRef = useRef(0);
 
   const handlePopoverShow = useCallback(() => {
     onOpenChange?.(true);
   }, [onOpenChange]);
 
   const handlePopoverHide = useCallback(() => {
-    lastHideTimeRef.current = Date.now();
     onOpenChange?.(false);
   }, [onOpenChange]);
 
@@ -344,6 +339,13 @@ export function Popover({
     hasCloseButton,
     closeButtonLabel,
     hasAutoFocus,
+    // The surface is the box that paints background, radius and elevation, so
+    // it is the element the `popover` theme target has to sit on — a target on
+    // the content div inside it styles a box that paints nothing.
+    surfaceTarget: 'popover',
+    xstyle: [styles.contentPadding, xstyle],
+    className,
+    style,
     onShow: handlePopoverShow,
     onHide: handlePopoverHide,
   });
@@ -353,11 +355,7 @@ export function Popover({
     if (!isEnabled) {
       return;
     }
-    // If the popover was just closed by light dismiss (clicking outside),
-    // the trigger click fires in the same event — skip re-opening.
-    if (Date.now() - lastHideTimeRef.current < 50) {
-      return;
-    }
+    // `toggle` absorbs a click that belongs to its own light dismiss.
     popover.toggle();
   }, [isEnabled, popover]);
 
@@ -511,24 +509,12 @@ export function Popover({
   if (anchorRef && children == null) {
     return (
       <>
-        {popover.render(
-          <div
-            data-testid={testId}
-            {...mergeProps(
-              themeProps('popover'),
-              stylex.props(styles.contentPadding, xstyle),
-              className,
-              style,
-            )}>
-            {content}
-          </div>,
-          {
-            placement,
-            alignment,
-            offset: spacingVars['--spacing-1'],
-            xstyle: [popoverXstyle, layerAnimations[placement]],
-          },
-        )}
+        {popover.render(<div data-testid={testId}>{content}</div>, {
+          placement,
+          alignment,
+          offset: spacingVars['--spacing-1'],
+          xstyle: [popoverXstyle, layerAnimations[placement]],
+        })}
       </>
     );
   }
@@ -548,24 +534,12 @@ export function Popover({
     return (
       <>
         {children(triggerProps)}
-        {popover.render(
-          <div
-            data-testid={testId}
-            {...mergeProps(
-              themeProps('popover'),
-              stylex.props(styles.contentPadding, xstyle),
-              className,
-              style,
-            )}>
-            {content}
-          </div>,
-          {
-            placement,
-            alignment,
-            offset: spacingVars['--spacing-1'],
-            xstyle: [popoverXstyle, layerAnimations[placement]],
-          },
-        )}
+        {popover.render(<div data-testid={testId}>{content}</div>, {
+          placement,
+          alignment,
+          offset: spacingVars['--spacing-1'],
+          xstyle: [popoverXstyle, layerAnimations[placement]],
+        })}
       </>
     );
   }
@@ -578,24 +552,12 @@ export function Popover({
           {children}
         </div>
       </InteractiveRoleContext>
-      {popover.render(
-        <div
-          data-testid={testId}
-          {...mergeProps(
-            themeProps('popover'),
-            stylex.props(styles.contentPadding, xstyle),
-            className,
-            style,
-          )}>
-          {content}
-        </div>,
-        {
-          placement,
-          alignment,
-          offset: spacingVars['--spacing-1'],
-          xstyle: [popoverXstyle, layerAnimations[placement]],
-        },
-      )}
+      {popover.render(<div data-testid={testId}>{content}</div>, {
+        placement,
+        alignment,
+        offset: spacingVars['--spacing-1'],
+        xstyle: [popoverXstyle, layerAnimations[placement]],
+      })}
     </>
   );
 }

package/src/Popover/usePopover.tsx

@@ -5,7 +5,7 @@
 /**
  * @file usePopover.tsx
  * @input Uses useLayer, useFocusTrap, React hooks
- * @output Exports usePopover hook for popover dialogs with focus trapping
+ * @output Exports usePopover and a package-internal trigger-aware variant.
  * @position Higher-level layer utility; used by DatePicker, Combobox, etc.
  *
  * Combines popover layer behavior with focus trap for dialog-like popovers.
@@ -17,7 +17,7 @@
 
 import React, {useCallback, useEffect, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
-import {useLayer, type ContextRenderProps} from '../Layer/useLayer';
+import {useLayerInternal, type ContextRenderProps} from '../Layer/useLayer';
 import {useFocusTrap} from '../hooks/useFocusTrap';
 import {LayerDepthProvider} from '../Layer/LayerDepthContext';
 import type {StyleXStyles} from '@stylexjs/stylex';
@@ -41,7 +41,8 @@ const styles = stylex.create({
   // Consumers that need a raw positioned layer should use useLayer instead.
   surface: {
     backgroundColor: colorVars['--color-background-popover'],
-    borderRadius: radiusVars['--radius-container'],
+    '--_popover-radius': radiusVars['--radius-container'],
+    borderRadius: 'var(--_popover-radius)',
     boxShadow: shadowVars['--shadow-low'],
   },
   // Focus trap container
@@ -111,6 +112,16 @@ export interface UsePopoverOptions {
    */
   xstyle?: StyleXStyles;
 
+  /**
+   * Additional class name applied to the painted popover surface.
+   */
+  className?: string;
+
+  /**
+   * Inline styles applied to the painted popover surface.
+   */
+  style?: React.CSSProperties;
+
   /**
    * Whether clicking outside should dismiss the popover.
    * @default true
@@ -283,6 +294,10 @@ export interface UsePopoverReturn {
   };
 }
 
+interface InternalUsePopoverReturn extends UsePopoverReturn {
+  wasJustDismissed: () => boolean;
+}
+
 /**
  * Hook for creating popover dialogs with focus trapping.
  *
@@ -323,11 +338,15 @@ export interface UsePopoverReturn {
  * }
  * ```
  */
-export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
+function usePopoverImplementation(
+  options: UsePopoverOptions = {},
+): InternalUsePopoverReturn {
   const {
     onShow,
     onHide,
     xstyle,
+    className,
+    style,
     hasLightDismiss = true,
     hasEscapeDismiss = true,
     hasAutoFocus = true,
@@ -351,7 +370,7 @@ export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
   const skipAutoFocusRef = useRef(false);
 
   // Core layer for popover positioning
-  const layer = useLayer({
+  const layer = useLayerInternal({
     mode: 'context',
     lightDismiss: hasLightDismiss,
     onShow,
@@ -400,6 +419,9 @@ export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
 
   // Toggle function
   const toggle = useCallback(() => {
+    if (layer.wasJustDismissed()) {
+      return;
+    }
     if (layer.isOpen) {
       layer.hide();
     } else {
@@ -450,6 +472,8 @@ export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
                 hasSurface && styles.surface,
                 xstyle,
               ),
+              className,
+              style,
             )}>
             {children}
             {hasCloseButton && (
@@ -475,6 +499,8 @@ export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
       hasCloseButton,
       hasSurface,
       surfaceTarget,
+      className,
+      style,
       closeButtonLabel,
       contentRef,
       dialogLabel,
@@ -491,9 +517,22 @@ export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
     show,
     hide: layer.hide,
     toggle,
+    wasJustDismissed: layer.wasJustDismissed,
     isOpen: layer.isOpen,
     id: layer.id,
     render,
     triggerProps,
   };
 }
+
+export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
+  const {wasJustDismissed: _, ...popover} = usePopoverImplementation(options);
+  return popover;
+}
+
+/** @internal Used by trigger components; not exported from package barrels. */
+export function usePopoverInternal(
+  options: UsePopoverOptions = {},
+): InternalUsePopoverReturn {
+  return usePopoverImplementation(options);
+}

package/src/PowerSearch/PowerSearch.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'PowerSearch',
   displayName: 'Power Search',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'powersearch',
     'search',

package/src/PowerSearch/PowerSearchEditPopover.test.tsx

@@ -286,6 +286,93 @@ describe('PowerSearch', () => {
     expect(onSave).not.toHaveBeenCalled();
   });
 
+  it('saves the freshly committed numeric value on Enter', () => {
+    const numericConfig: PowerSearchConfig = {
+      name: 'test-number',
+      fields: [
+        {
+          key: 'level',
+          label: 'Level',
+          operators: [
+            {key: 'equals', label: 'equals', value: {type: 'integer'}},
+          ],
+        },
+      ],
+    };
+    const onSave = vi.fn();
+
+    function NumericValueHarness() {
+      const internalConfig = useInternalConfig(numericConfig);
+      return (
+        <PowerSearchEditPopover
+          config={internalConfig}
+          filter={{
+            field: 'level',
+            operator: 'equals',
+            value: {type: 'integer', value: 5},
+          }}
+          mode="edit"
+          onSave={onSave}
+          onCancel={() => {}}
+        />
+      );
+    }
+
+    render(<NumericValueHarness />);
+    const input = screen.getByRole('spinbutton');
+    fireEvent.focus(input);
+    fireEvent.input(input, {target: {value: '42'}});
+    fireEvent.keyDown(input, {key: 'Enter'});
+
+    expect(onSave).toHaveBeenCalledWith({
+      field: 'level',
+      operator: 'equals',
+      value: {type: 'integer', value: 42},
+    });
+  });
+
+  it('does not save an invalid numeric draft on Enter', () => {
+    const numericConfig: PowerSearchConfig = {
+      name: 'test-number',
+      fields: [
+        {
+          key: 'level',
+          label: 'Level',
+          operators: [
+            {key: 'equals', label: 'equals', value: {type: 'integer'}},
+          ],
+        },
+      ],
+    };
+    const onSave = vi.fn();
+
+    function NumericValueHarness() {
+      const internalConfig = useInternalConfig(numericConfig);
+      return (
+        <PowerSearchEditPopover
+          config={internalConfig}
+          filter={{
+            field: 'level',
+            operator: 'equals',
+            value: {type: 'integer', value: 5},
+          }}
+          mode="edit"
+          onSave={onSave}
+          onCancel={() => {}}
+        />
+      );
+    }
+
+    render(<NumericValueHarness />);
+    const input = screen.getByRole('spinbutton');
+    fireEvent.focus(input);
+    fireEvent.input(input, {target: {value: '1·234'}});
+    fireEvent.keyDown(input, {key: 'Enter'});
+
+    expect(onSave).not.toHaveBeenCalled();
+    expect(input).toHaveValue('1·234');
+  });
+
   it('does not save/close on a composing Enter while typing a filter value (#4828)', () => {
     const onSave = vi.fn();
     const onCancel = vi.fn();