@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/PowerSearch/PowerSearch.tsx

@@ -38,7 +38,7 @@ import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {Icon} from '../Icon';
 import type {IconType} from '../Icon';
 import type {IconName} from '../Icon/globalIconRegistry';
-import type {InputStatus, FieldStatusVariant} from '../Field';
+import type {InputStatus} from '../Field';
 import {usePopover} from '../Popover/usePopover';
 import {layerViewportInset} from '../Layer/layerViewportInset.stylex';
 import {useAnnounce} from '../hooks/useAnnounce';
@@ -59,7 +59,6 @@ import {PowerSearchEditPopover} from './PowerSearchEditPopover';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {themeProps} from '../utils/themeProps';
 import {truncateCharacters} from '../utils/characters';
-import {useTranslator} from '../i18n';
 import {useLocale} from '../i18n/useLocale';
 import type {Locale} from '../i18n/types';
 import type {
@@ -77,6 +76,14 @@ import type {
 } from './types';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/PowerSearch/PowerSearch.generated';
+
+registerEnglishFallback(english);
 // =============================================================================
 // Icon mapping for typeahead entries
 // =============================================================================
@@ -413,7 +420,7 @@ export interface PowerSearchProps extends Omit<
    * - 'detached': message floats below as a separate element with spacing
    * @default 'attached'
    */
-  statusVariant?: FieldStatusVariant;
+  statusVariant?: FieldStatusPlacement;
   /** Max width for dropdown menu. */
   menuWidth?: number;
   /** Max display length for filter token values. @default 40 */
@@ -586,7 +593,7 @@ export function PowerSearch({
   const size = useSize(sizeProp, 'md');
   const config = useInternalConfig(configProp);
   const searchSource = usePowerSearchSource(config, maxSearchResults);
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const label = labelFromProps ?? t('@astryx.powersearch.label');
   const placeholder =
@@ -1083,6 +1090,7 @@ export function PowerSearch({
   // Build combined endContent from resultCount + endContent props
   const combinedEndContent = useMemo((): React.ReactNode => {
     const resultCountNode =
+      // eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `resultCountText` is a formatted string, not a slot
       resultCountText != null ? (
         <span {...stylex.props(resultCountStyles.text)}>{resultCountText}</span>
       ) : null;

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -19,7 +19,6 @@ import {Selector} from '../Selector';
 import {HStack, VStack} from '../Stack';
 import {Icon} from '../Icon';
 import {TreeList, type TreeListItemData} from '../TreeList';
-import {useTranslator} from '../i18n';
 import {isImeKeyEvent} from '../utils/ime';
 import {spacingVars, typeScaleVars} from '../theme/tokens.stylex';
 import {
@@ -35,6 +34,13 @@ import type {
   OperatorValue,
   PowerSearchOperator,
 } from './types';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/PowerSearch/PowerSearchEditPopover.generated';
+
+registerEnglishFallback(english);
 
 // Below the popover layer's 400px floor (see popoverLayerStyles in
 // PowerSearch.tsx) the chip rows collapse from one line to wrapped lines.
@@ -264,7 +270,7 @@ function NestedSubFilterRow({
   maxMenuItems,
   isReadOnly,
 }: NestedSubFilterRowProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const fieldOptions = useMemo(
     () =>
       config.getVisibleFields().map(field => ({
@@ -397,7 +403,7 @@ function NestedEditor({
   maxMenuItems,
   isReadOnly,
 }: NestedEditorProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const [subFilters, setSubFilters] = useState<EditablePartialFilter[]>(() => {
     if (partialFilter.value && partialFilter.value.type === 'nested') {
       return partialFilter.value.value.map(f => initEditableFilter(config, f));
@@ -661,7 +667,7 @@ export function PowerSearchEditPopover({
   maxMenuItems,
   isReadOnly = false,
 }: PowerSearchEditPopoverProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const saveButtonLabel =
     saveButtonLabelFromProps ?? t('@astryx.powersearch.editor.apply');
   const [partialFilter, setPartialFilter] =

package/src/PowerSearch/PowerSearchToken.tsx

@@ -12,13 +12,13 @@
 import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Token} from '../Token';
-import {useTranslator} from '../i18n';
 import {useLocale} from '../i18n/useLocale';
 import {fontWeightVars} from '../theme/tokens.stylex';
 import {formatFilterValue} from './formatFilterValue';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {useInternalConfig} from './useInternalConfig';
 import type {PowerSearchTokenProps} from './types';
+import {useComponentTranslator} from '../i18n/useComponentTranslator';
 
 const tokenValueStyles = stylex.create({
   value: {
@@ -44,7 +44,7 @@ export function PowerSearchToken({
   isDisabled,
 }: PowerSearchTokenProps) {
   const config = useInternalConfig(configProp);
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
 
   const fieldLabel = field.label;

package/src/PowerSearch/PowerSearchValueEditor.tsx

@@ -45,7 +45,14 @@ import {TimeInput} from '../TimeInput';
 import {Selector} from '../Selector';
 import {Tokenizer} from '../Tokenizer';
 import {Typeahead} from '../Typeahead';
-import {useLocale, useTranslator} from '../i18n';
+import {useLocale} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated';
+
+registerEnglishFallback(english);
 
 export interface PowerSearchValueEditorProps {
   operatorValue: OperatorValue;
@@ -114,7 +121,7 @@ function StringEditor({
   maxMenuItems?: number;
   isDisabled?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const currentValue = filterValue?.type === 'string' ? filterValue.value : '';
 
   // When a searchSource is provided, render a typeahead instead of a plain
@@ -172,7 +179,7 @@ function StringListEditor({
   maxMenuItems?: number;
   isDisabled?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const currentValue: SearchableItem[] = useMemo(() => {
     if (filterValue?.type !== 'string_list') {
       return [];
@@ -293,7 +300,7 @@ function IntegerEditor({
   onEnter?: () => void;
   isDisabled?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const currentValue =
     filterValue?.type === 'integer' ? filterValue.value : undefined;
   const handlers = useNumberEditorHandlers({
@@ -338,7 +345,7 @@ function FloatEditor({
   onEnter?: () => void;
   isDisabled?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const currentValue =
     filterValue?.type === 'float' ? filterValue.value : undefined;
   const handlers = useNumberEditorHandlers({
@@ -380,7 +387,7 @@ function TimeEditor({
   onChange: (value: FilterValue) => void;
   isDisabled?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const currentValue =
     filterValue?.type === 'time'
       ? (filterValue.value as ISOTimeString)
@@ -413,7 +420,7 @@ function DateAbsoluteEditor({
   onChange: (value: FilterValue) => void;
   isDisabled?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   // Convert unixSeconds to ISO date string for the date input
   const currentValue = useMemo(() => {
     if (filterValue?.type !== 'date_absolute') {
@@ -450,7 +457,7 @@ function DateRelativeEditor({
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
   isDisabled?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const currentValue =
     filterValue?.type === 'date_relative' ? filterValue.value : undefined;
 
@@ -510,7 +517,7 @@ function DateRangeEditor({
   onChange: (value: FilterValue) => void;
   isDisabled?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const currentValue = useMemo<DateRange | null>(() => {
     if (filterValue?.type !== 'date_range') {
       return null;
@@ -578,7 +585,7 @@ function EnumEditor({
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
   isDisabled?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const currentValue =
     filterValue?.type === 'enum' ? filterValue.value : undefined;
 
@@ -616,7 +623,7 @@ function EnumListEditor({
   onChange: (value: FilterValue) => void;
   isDisabled?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const items = useMemo(
     () => enumItemsToSearchableItems(operatorValue.values),
     [operatorValue.values],
@@ -671,7 +678,7 @@ function EntityListEditor({
   maxMenuItems?: number;
   isDisabled?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const source = useMemo<SearchSource<SearchableItem>>(() => {
     if (operatorValue.searchSource) {
       return operatorValue.searchSource;
@@ -734,7 +741,7 @@ function CustomEditor({
   onChange: (value: FilterValue) => void;
   isDisabled?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const currentValue =
     filterValue?.type === 'custom' ? filterValue.value : null;
   const EditorComponent = operatorValue.Editor;

package/src/PowerSearch/formatFilterValue.ts

@@ -14,6 +14,10 @@ import type {OperatorValue, FilterValue, EnumItem} from './types';
 import type {InternalConfig} from './useInternalConfig';
 import type {Locale, TranslatorFn} from '../i18n';
 import {truncateCharacters} from '../utils/characters';
+import {registerEnglishFallback} from '../i18n/englishFallback';
+import english from '../i18n/generated-english/PowerSearch/formatFilterValue.generated';
+
+registerEnglishFallback(english);
 
 function truncate(str: string, maxLength: number): string {
   return truncateCharacters(str, maxLength);

package/src/PowerSearch/resolveOperatorLabel.ts

@@ -15,14 +15,20 @@
  * Astryx's shipped default operators use the i18nKey variant; consumers
  * writing custom operators typically use the label variant.
  *
+ * A custom operator may name any Astryx key in `i18nKey`, so this module
+ * registers the whole English catalog rather than only the keys Core names.
+ *
  * SYNC: When modified, update:
  * - /packages/core/src/PowerSearch/types.ts (PowerSearchOperator type)
  * - /packages/core/src/PowerSearch/index.ts (re-export)
  */
 
-import type {TranslatorFn} from '../i18n';
+import type {TranslatorFn} from '../i18n/useTranslator';
+import {registerFullEnglishFallback} from '../i18n/fullEnglishFallback';
 import type {PowerSearchOperator} from './types';
 
+registerFullEnglishFallback();
+
 export function resolveOperatorLabel(
   operator: PowerSearchOperator,
   t: TranslatorFn,

package/src/PowerSearch/usePowerSearchConfig.ts

@@ -18,6 +18,10 @@ import type {
   PowerSearchOperator,
 } from './types';
 import {resolveDateTimeRangePart} from './resolveDateTimeRangePart';
+import {registerEnglishFallback} from '../i18n/englishFallback';
+import english from '../i18n/generated-english/PowerSearch/usePowerSearchConfig.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Public Types

package/src/PowerSearch/usePowerSearchSource.ts

@@ -15,10 +15,10 @@
 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';
+import {useComponentTranslator} from '../i18n/useComponentTranslator';
 
 /**
  * @param maxTypedResults Cap applied to ranked results for a non-empty query.
@@ -29,7 +29,7 @@ export function usePowerSearchSource(
   config: InternalConfig,
   maxTypedResults: number,
 ): SearchSource<PowerSearchItem> {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   return useMemo(() => {
     const allItems = buildFieldItems(config);
     // Resolver stays inline — `t()` internally memoizes both catalog

package/src/ProgressBar/ProgressBar.tsx

@@ -611,7 +611,7 @@ export function ProgressBar({
         {resolvedMarks.map(mark => {
           // The tick element. It is both the Tooltip's anchor and the Suspense
           // fallback shown while the lazy Tooltip chunk loads, so the tick is
-          // always visible and the label attaches once ready. The list `key`
+          // always visible and the tooltip attaches once ready. The list `key`
           // lives on the mapped <Suspense>, not here.
           //
           // `placement` is reflected as `data-placement` (and a class) so a
@@ -620,6 +620,8 @@ export function ProgressBar({
           // for the same reason.
           const markEl = (
             <span
+              role="img"
+              aria-label={mark.label}
               tabIndex={0}
               {...mergeProps(
                 themeProps('progress-bar-mark', {

package/src/RadioList/RadioList.tsx

@@ -16,6 +16,7 @@
  * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 
+import {RadioListReasonContext} from './RadioListReasonContext';
 import {createLayerScopedContext as createContext} from '../Layer/layerScopedContext';
 import React, {
   useCallback,
@@ -246,7 +247,8 @@ export function RadioList({
   // controls swallow pointer events, so the tooltip listeners attach to the
   // radiogroup container and the radios stay perceivable via aria-disabled
   // instead of the disabled attribute. Selection is blocked in the item's
-  // onChange guard.
+  // onChange guard. The reason describes the radiogroup and each radio (see
+  // RadioListReasonContext).
   const showsDisabledMessage = isDisabled && !!disabledMessage;
   const disabledMessageTooltip = useTooltip({
     placement: 'above',
@@ -426,7 +428,16 @@ export function RadioList({
           controlClassName,
           controlStyle,
         )}>
-        <RadioListContext value={contextValue}>{children}</RadioListContext>
+        <RadioListContext value={contextValue}>
+          <RadioListReasonContext
+            value={
+              showsDisabledMessage
+                ? disabledMessageTooltip.describedBy
+                : undefined
+            }>
+            {children}
+          </RadioListReasonContext>
+        </RadioListContext>
       </div>
       {showsDisabledMessage &&
         disabledMessageTooltip.renderTooltip(disabledMessage)}

package/src/RadioList/RadioListItem.tsx

@@ -23,6 +23,8 @@ import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import {RadioListContext} from './RadioList';
+import {RadioListReasonContext} from './RadioListReasonContext';
+import {joinAriaIDs} from '../utils/inputAria';
 import {colorVars, radiusVars} from '../theme/tokens.stylex';
 import {mergeProps, isRenderable, rtlStyles} from '../utils';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
@@ -265,6 +267,7 @@ export function RadioListItem({
   // the touch press controller (pressableCoverage.test.ts).
   const pressable = usePressFeedback();
   const context = use(RadioListContext);
+  const disabledReasonID = use(RadioListReasonContext);
   if (!context) {
     throw new Error('RadioListItem must be used within an RadioList');
   }
@@ -351,7 +354,12 @@ export function RadioListItem({
         // exclusive — aria-labelledby would otherwise win over it.
         aria-label={ariaLabel}
         aria-labelledby={ariaLabel == null ? labelID : undefined}
-        aria-describedby={hasDescription ? descriptionID : undefined}
+        // The item's own description, then the group's disabled reason
+        // (RadioList's disabledMessage), which describes each radio (FR5).
+        aria-describedby={joinAriaIDs(
+          hasDescription ? descriptionID : undefined,
+          disabledReasonID,
+        )}
         {...stylex.props(
           styles.input,
           rtlStyles.centerInline('-50%'),

package/src/RadioList/RadioListReasonContext.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file RadioListReasonContext.ts
+ * @input Uses createLayerScopedContext
+ * @output Exports RadioListReasonContext (internal; not re-exported)
+ * @position Internal to RadioList; read by RadioListItem
+ *
+ * The id of a RadioList's disabled-reason tooltip while the group is disabled
+ * with a `disabledMessage`. The reason describes the radiogroup (FR1), and
+ * each radio adds it to its own `aria-describedby` (FR5): a screen reader
+ * announces a radio's description when the radio takes focus, which it does
+ * not reliably do for a description on the radiogroup.
+ */
+
+import {createLayerScopedContext} from '../Layer/layerScopedContext';
+
+// Layer-scoped like RadioListContext: content in a layer opened from inside the
+// group is not a radio of it.
+export const RadioListReasonContext = createLayerScopedContext<
+  string | undefined
+>(undefined);
+RadioListReasonContext.displayName = 'RadioListReasonContext';

package/src/Resizable/ResizeHandle.tsx

@@ -52,9 +52,15 @@ import {
   type ResizableProps,
 } from './useResizable';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Resizable/ResizeHandle.generated';
+
+registerEnglishFallback(english);
 const KEYBOARD_STEP = 10;
 const KEYBOARD_LARGE_STEP = 50;
 
@@ -450,7 +456,7 @@ export function ResizeHandle({
   ref,
   ...props
 }: ResizeHandleProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.resizable.handle.label');
   const handleRef = useRef<HTMLDivElement>(null);
   // The pointer that owns the in-flight drag, plus the values its deltas are