@astryxdesign/core 0.4.7 → 0.5.0-canary.009bcb3

package/src/PowerSearch/usePowerSearchSource.ts

@@ -14,13 +14,20 @@
 
 import {useMemo} from 'react';
 import type {SearchSource} from '../Typeahead/types';
+import {groupItems} from '../utils';
 import {useTranslator} from '../i18n';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
 import type {InternalConfig} from './useInternalConfig';
 import type {PowerSearchItem, PowerSearchOperator, FilterValue} from './types';
 
+/**
+ * @param maxTypedResults Cap applied to ranked results for a non-empty query.
+ *   The source never truncates empty-query browsing; PowerSearch's view applies
+ *   a separate 1,000-row safety ceiling.
+ */
 export function usePowerSearchSource(
   config: InternalConfig,
+  maxTypedResults: number,
 ): SearchSource<PowerSearchItem> {
   const t = useTranslator();
   return useMemo(() => {
@@ -198,14 +205,14 @@ export function usePowerSearchSource(
           }
         }
 
-        return results;
+        return results.slice(0, maxTypedResults);
       },
 
       bootstrap(): PowerSearchItem[] {
         return allItems;
       },
     };
-  }, [config, t]);
+  }, [config, t, maxTypedResults]);
 }
 
 interface ValueMatch {
@@ -282,9 +289,12 @@ function buildFieldItems(config: InternalConfig): PowerSearchItem[] {
       auxiliaryData: {
         fieldKey: field.key,
         operatorKey: defaultOp?.key,
+        group: field.group,
       },
     });
   }
 
-  return items;
+  return groupItems(items, {ungroupedFirst: true}).flatMap(
+    group => group.items,
+  );
 }

package/src/ProgressBar/ProgressBar.doc.mjs

@@ -77,12 +77,30 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-progressbar', visualProps: ['variant']},
-      {className: 'astryx-progressbar-fill', visualProps: ['variant']},
-      {className: 'astryx-progressbar-track'},
+      {className: 'astryx-progress-bar', visualProps: ['variant']},
+      {className: 'astryx-progress-bar-fill', visualProps: ['variant']},
+      {className: 'astryx-progress-bar-track'},
+      {
+        className: 'astryx-progress-bar-mark',
+        visualProps: ['variant', 'placement'],
+      },
+      // Still emitted beside the names above, so themes written against
+      // them keep working. Drop in the next major.
+      {
+        className: 'astryx-progressbar',
+        visualProps: ['variant'],
+        deprecatedFor: 'progress-bar',
+      },
+      {
+        className: 'astryx-progressbar-fill',
+        visualProps: ['variant'],
+        deprecatedFor: 'progress-bar-fill',
+      },
+      {className: 'astryx-progressbar-track', deprecatedFor: 'progress-bar-track'},
       {
         className: 'astryx-progressbar-mark',
         visualProps: ['variant', 'placement'],
+        deprecatedFor: 'progress-bar-mark',
       },
     ],
     vars: [
@@ -182,12 +200,30 @@ export const docsZh = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-progressbar', visualProps: ['variant']},
-      {className: 'astryx-progressbar-fill', visualProps: ['variant']},
-      {className: 'astryx-progressbar-track'},
+      {className: 'astryx-progress-bar', visualProps: ['variant']},
+      {className: 'astryx-progress-bar-fill', visualProps: ['variant']},
+      {className: 'astryx-progress-bar-track'},
+      {
+        className: 'astryx-progress-bar-mark',
+        visualProps: ['variant', 'placement'],
+      },
+      // Still emitted beside the names above, so themes written against
+      // them keep working. Drop in the next major.
+      {
+        className: 'astryx-progressbar',
+        visualProps: ['variant'],
+        deprecatedFor: 'progress-bar',
+      },
+      {
+        className: 'astryx-progressbar-fill',
+        visualProps: ['variant'],
+        deprecatedFor: 'progress-bar-fill',
+      },
+      {className: 'astryx-progressbar-track', deprecatedFor: 'progress-bar-track'},
       {
         className: 'astryx-progressbar-mark',
         visualProps: ['variant', 'placement'],
+        deprecatedFor: 'progress-bar-mark',
       },
     ],
     vars: [

package/src/ProgressBar/ProgressBar.test.tsx

@@ -839,3 +839,27 @@ describe('ProgressBar', () => {
     });
   });
 });
+
+describe('ProgressBar theme target names', () => {
+  it('renders the deprecated classes beside the current ones', () => {
+    const {container} = render(
+      <ProgressBar
+        value={50}
+        label="Progress"
+        marks={[{value: 80, label: 'M'}]}
+      />,
+    );
+    expect(container.querySelector('.astryx-progress-bar')).toHaveClass(
+      'astryx-progressbar',
+    );
+    expect(container.querySelector('.astryx-progress-bar-track')).toHaveClass(
+      'astryx-progressbar-track',
+    );
+    expect(container.querySelector('.astryx-progress-bar-fill')).toHaveClass(
+      'astryx-progressbar-fill',
+    );
+    expect(container.querySelector('.astryx-progress-bar-mark')).toHaveClass(
+      'astryx-progressbar-mark',
+    );
+  });
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -479,7 +479,13 @@ export function ProgressBar({
     <div
       ref={ref}
       {...mergeProps(
-        themeProps('progressbar', {variant}),
+        themeProps(
+          'progress-bar',
+          {variant},
+          // `progressbar` ran the compound name together; themes styling it
+          // keep working until the next major.
+          {legacyNames: ['progressbar']},
+        ),
         stylex.props(styles.container, xstyle),
         className,
         style,
@@ -524,13 +530,19 @@ export function ProgressBar({
         aria-labelledby={labelId}
         aria-valuetext={isIndeterminate ? undefined : valueText}
         {...mergeProps(
-          themeProps('progressbar-track'),
+          themeProps('progress-bar-track', undefined, {
+            legacyNames: ['progressbar-track'],
+          }),
           stylex.props(styles.track, isIndeterminate && styles.trackClipped),
         )}>
         {isIndeterminate ? (
           <div
             {...mergeProps(
-              themeProps('progressbar-fill', {variant: fillVariant}),
+              themeProps(
+                'progress-bar-fill',
+                {variant: fillVariant},
+                {legacyNames: ['progressbar-fill']},
+              ),
               stylex.props(
                 styles.indeterminateFill,
                 variantStyles[fillVariant],
@@ -540,7 +552,11 @@ export function ProgressBar({
         ) : (
           <div
             {...mergeProps(
-              themeProps('progressbar-fill', {variant: fillVariant}),
+              themeProps(
+                'progress-bar-fill',
+                {variant: fillVariant},
+                {legacyNames: ['progressbar-fill']},
+              ),
               stylex.props(styles.fill, variantStyles[fillVariant]),
             )}
             style={{width: `${percentage}%`}}
@@ -569,10 +585,14 @@ export function ProgressBar({
             <span
               tabIndex={0}
               {...mergeProps(
-                themeProps('progressbar-mark', {
-                  variant: fillVariant,
-                  placement: mark.isOnFill ? 'fill' : 'track',
-                }),
+                themeProps(
+                  'progress-bar-mark',
+                  {
+                    variant: fillVariant,
+                    placement: mark.isOnFill ? 'fill' : 'track',
+                  },
+                  {legacyNames: ['progressbar-mark']},
+                ),
                 stylex.props(
                   focusOutlineStyles.focusVisible,
                   styles.mark,

package/src/Resizable/ResizeHandle.tsx

@@ -35,11 +35,12 @@ import {
   spacingVars,
 } from '../theme/tokens.stylex';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {mergeProps, mergeRefs, rtlStyles} from '../utils';
+import {mergeProps, rtlStyles} from '../utils';
 import type {ResizableProps} from './useResizable';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 
+import {useMergedRefs} from '../hooks/useMergedRefs';
 const KEYBOARD_STEP = 10;
 const KEYBOARD_LARGE_STEP = 50;
 
@@ -549,7 +550,7 @@ export function ResizeHandle({
 
   return (
     <div
-      ref={mergeRefs(ref, handleRef)}
+      ref={useMergedRefs(ref, handleRef)}
       role="separator"
       aria-orientation={isHorizontal ? 'vertical' : 'horizontal'}
       aria-valuenow={ariaValueNow}

package/src/SegmentedControl/SegmentedControl.tsx

@@ -26,11 +26,12 @@ import type {
   SegmentedControlSize,
   SegmentedControlLayout,
 } from './SegmentedControlContext';
-import {mergeProps, mergeRefs, composeEventHandlers} from '../utils';
+import {mergeProps, composeEventHandlers} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 
+import {useMergedRefs} from '../hooks/useMergedRefs';
 export interface SegmentedControlProps extends Omit<
   BaseProps<HTMLDivElement>,
   'onChange'
@@ -258,7 +259,7 @@ export function SegmentedControl({
   return (
     <SegmentedControlContext value={contextValue}>
       <div
-        ref={mergeRefs(ref, listRef, disabledMessageTooltip.ref)}
+        ref={useMergedRefs(ref, listRef, disabledMessageTooltip.ref)}
         {...rest}
         role="radiogroup"
         aria-label={label}

package/src/SelectableCard/SelectableCard.doc.mjs

@@ -37,6 +37,9 @@ export const docs = {
   theming: {
     container: true,
     targets: [{className: 'astryx-selectable-card', visualProps: ['selected', 'variant']}],
+    vars: [
+      {name: '--selectable-card-ring-color', description: 'Colour of the selection ring drawn for a variant a theme added. The built-in variants each ring in their own border token and ignore this; a theme that adds a variant sets it in the same rule as that variant\'s `backgroundColor`, because no token the component could pick is guaranteed to contrast with a fill it cannot know.', default: 'var(--color-accent)'},
+    ],
   },
   playground: {
     defaults: {

package/src/SelectableCard/SelectableCard.tsx

@@ -40,7 +40,7 @@ import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
 import type {Elevation, SizeValue, SpacingStep} from '../utils/types';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps} from '../utils';
 import {Card} from '../Card/Card';
 import type {CardVariant} from '../Card/Card';
 import {useClickableContainer} from '../hooks/useClickableContainer';
@@ -48,12 +48,17 @@ import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 
+import {useMergedRefs} from '../hooks/useMergedRefs';
 // =============================================================================
 // Styles — selection + interaction; Card handles the rest
 // =============================================================================
 
 const styles = stylex.create({
   interactive: {
+    // Declared here, on the element that carries the `astryx-selectable-card`
+    // target, so a theme has something to override — the ring for a variant
+    // only the theme knows about reads it (see selectedUnknown).
+    '--selectable-card-ring-color': colorVars['--color-accent'],
     position: 'relative',
     cursor: {
       default: 'pointer',
@@ -152,6 +157,14 @@ const styles = stylex.create({
     borderColor: colorVars['--color-border-yellow'],
     '--_card-ring': `inset 0 0 0 2px ${colorVars['--color-border-yellow']}`,
   },
+  // A theme-added variant paints with colours the component cannot know, so no
+  // token is guaranteed to contrast with it — an accent ring disappears against
+  // an accent fill, and an outset one is no better. The theme that supplied the
+  // fill is the only thing that can pick a ring, so it gets a lever beside it;
+  // the var defaults to the accent, keeping every built-in unchanged.
+  selectedUnknown: {
+    '--_card-ring': 'inset 0 0 0 2px var(--selectable-card-ring-color)',
+  },
 });
 
 const selectedStyleForVariant = (variant: CardVariant) => {
@@ -180,6 +193,10 @@ const selectedStyleForVariant = (variant: CardVariant) => {
       return styles.selectedTeal;
     case 'yellow':
       return styles.selectedYellow;
+    // CardVariant is open — a theme can add a variant this switch has never
+    // seen, and it still has to look selected.
+    default:
+      return styles.selectedUnknown;
   }
 };
 
@@ -346,7 +363,7 @@ export function SelectableCard({
 
   return (
     <Card
-      ref={mergeRefs(ref, containerRef)}
+      ref={useMergedRefs(ref, containerRef)}
       width={width}
       height={height}
       maxWidth={maxWidth}

package/src/Selector/Selector.doc.mjs

@@ -89,6 +89,20 @@ export const docs = {
       description: 'Placeholder text for the search input.',
       default: "'Search...'",
     },
+    {
+      name: 'emptyText',
+      type: 'ReactNode',
+      description:
+        'Content shown in the dropdown panel when there are no options to show, and announced in a polite live region when the panel opens (a string override is announced verbatim; a richer node falls back to the default text). Not shown while isLoading.',
+      default: "'No options'",
+    },
+    {
+      name: 'emptySearchText',
+      type: 'ReactNode',
+      description:
+        'Content shown in the dropdown panel when a search query matches no options, and announced in a polite live region at the same time (a string override is announced verbatim; a richer node falls back to the default text).',
+      default: "'No results found'",
+    },
     {
       name: 'placeholder',
       type: 'string',
@@ -171,7 +185,7 @@ export const docs = {
       name: 'renderValue',
       type: '(option: SelectorOptionData) => ReactNode',
       description:
-        'Custom render function for the selected option inside the closed trigger. The trigger is sized by padding, so it is the size token for a one-line value (28/32/36) and exactly one text line taller for a two-line one (48/52/56) — always on the 4px rhythm, always aligned with the buttons and inputs beside it. Inside an InputGroup the group owns the row height: a SelectorOption folds onto one line and ellipsizes, and any taller node is cut off at the row.',
+        'Custom render function for the selected option inside the closed trigger. The trigger is sized by padding, so it is the size token for a one-line value (28/32/36) and exactly one text line taller for a two-line one (48/52/56), always on the 4px rhythm, always aligned with the buttons and inputs beside it. Inside an InputGroup the group owns the row height: a SelectorOption folds onto one line and ellipsizes, and any taller node is cut off at the row.',
     },
     {
       name: 'indicatorPosition',
@@ -186,6 +200,17 @@ export const docs = {
       description:
         'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
     },
+    {
+      name: 'startIcon',
+      type: 'IconType | ReactNode',
+      description: 'Icon displayed at the start of the selector trigger.',
+    },
+    {
+      name: 'isLoading',
+      type: 'boolean',
+      description: 'Shows a loading spinner in the trigger.',
+      default: 'false',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',