@astryxdesign/core 0.4.7 → 0.5.0-canary.055e75f

package/src/CodeBlock/CodeBlock.tsx

@@ -810,14 +810,20 @@ export function CodeBlock({
         void handleCopy();
       }}
       xstyle={[styles.copyButton, !showHeader && styles.copyButtonAbsolute]}
-      {...themeProps('codeblock-copy-button')}
+      {...themeProps('code-block-copy-button', undefined, {
+        legacyNames: ['codeblock-copy-button'],
+      })}
     />
   ) : null;
 
   const headerEl = showHeader ? (
     <div
       {...mergeProps(
-        themeProps('codeblock-header', {size, language, container}),
+        themeProps(
+          'code-block-header',
+          {size, language, container},
+          {legacyNames: ['codeblock-header']},
+        ),
         stylex.props(
           styles.headerRow,
           hasLineNumbers ? styles.headerWithDivider : styles.headerCompact,
@@ -845,7 +851,11 @@ export function CodeBlock({
         )}>
         <span
           {...mergeProps(
-            themeProps('codeblock-title', {size, language}),
+            themeProps(
+              'code-block-title',
+              {size, language},
+              {legacyNames: ['codeblock-title']},
+            ),
             stylex.props(styles.headerTitle),
           )}>
           {canCollapse && (
@@ -917,7 +927,13 @@ export function CodeBlock({
     <pre
       ref={ref}
       {...mergeProps(
-        themeProps('codeblock', {size, language, container}),
+        themeProps(
+          'code-block',
+          {size, language, container},
+          // `codeblock` ran the compound name together; themes styling it keep
+          // working until the next major.
+          {legacyNames: ['codeblock']},
+        ),
         stylex.props(
           styles.root,
           dynamicStyles.width(widthProp),

package/src/CodeBlock/highlightRanges.ts

@@ -67,7 +67,7 @@ function ensureDynamicHighlightType(tokenType: string): void {
   const name = `astryx-${tokenType}`;
   const colorVar = `var(--color-syntax-${tokenType}, currentColor)`;
   dynamicStyleSheet.insertRule(
-    `.astryx-codeblock code::highlight(${name}), .astryx-codeeditor code::highlight(${name}) { color: ${colorVar}; }`,
+    `.astryx-code-block code::highlight(${name}), .astryx-codeeditor code::highlight(${name}) { color: ${colorVar}; }`,
   );
 }
 

package/src/CodeBlock/highlightStyles.ts

@@ -30,31 +30,31 @@ const FALLBACK_TOKENS = `:root {\n${Object.entries(syntaxTokenDefaults)
 const HIGHLIGHT_STYLES = `
 ${FALLBACK_TOKENS}
 
-.astryx-codeblock code::highlight(astryx-keyword),
+.astryx-code-block code::highlight(astryx-keyword),
 .astryx-codeeditor code::highlight(astryx-keyword) { color: var(--color-syntax-keyword); }
-.astryx-codeblock code::highlight(astryx-string),
+.astryx-code-block code::highlight(astryx-string),
 .astryx-codeeditor code::highlight(astryx-string) { color: var(--color-syntax-string); }
-.astryx-codeblock code::highlight(astryx-comment),
+.astryx-code-block code::highlight(astryx-comment),
 .astryx-codeeditor code::highlight(astryx-comment) { color: var(--color-syntax-comment); }
-.astryx-codeblock code::highlight(astryx-number),
+.astryx-code-block code::highlight(astryx-number),
 .astryx-codeeditor code::highlight(astryx-number) { color: var(--color-syntax-number); }
-.astryx-codeblock code::highlight(astryx-function),
+.astryx-code-block code::highlight(astryx-function),
 .astryx-codeeditor code::highlight(astryx-function) { color: var(--color-syntax-function); }
-.astryx-codeblock code::highlight(astryx-type),
+.astryx-code-block code::highlight(astryx-type),
 .astryx-codeeditor code::highlight(astryx-type) { color: var(--color-syntax-type); }
-.astryx-codeblock code::highlight(astryx-tag),
+.astryx-code-block code::highlight(astryx-tag),
 .astryx-codeeditor code::highlight(astryx-tag) { color: var(--color-syntax-tag); }
-.astryx-codeblock code::highlight(astryx-attribute),
+.astryx-code-block code::highlight(astryx-attribute),
 .astryx-codeeditor code::highlight(astryx-attribute) { color: var(--color-syntax-attribute); }
-.astryx-codeblock code::highlight(astryx-property),
+.astryx-code-block code::highlight(astryx-property),
 .astryx-codeeditor code::highlight(astryx-property) { color: var(--color-syntax-property); }
-.astryx-codeblock code::highlight(astryx-operator),
+.astryx-code-block code::highlight(astryx-operator),
 .astryx-codeeditor code::highlight(astryx-operator) { color: var(--color-syntax-operator); }
-.astryx-codeblock code::highlight(astryx-constant),
+.astryx-code-block code::highlight(astryx-constant),
 .astryx-codeeditor code::highlight(astryx-constant) { color: var(--color-syntax-constant); }
-.astryx-codeblock code::highlight(astryx-punctuation),
+.astryx-code-block code::highlight(astryx-punctuation),
 .astryx-codeeditor code::highlight(astryx-punctuation) { color: var(--color-syntax-punctuation); }
-.astryx-codeblock code::highlight(astryx-variable),
+.astryx-code-block code::highlight(astryx-variable),
 .astryx-codeeditor code::highlight(astryx-variable) { color: var(--color-syntax-variable); }
 
 /* Span-based fallback classes — used when highlightMode='spans' or

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -16,7 +16,7 @@ import {useCallback, useEffect, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps} from '../utils';
 import {
   colorVars,
   typeScaleVars,
@@ -29,6 +29,7 @@ import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 
+import {useMergedRefs} from '../hooks/useMergedRefs';
 const styles = stylex.create({
   wrapper: {
     display: 'flex',
@@ -216,7 +217,7 @@ export function CommandPaletteInput({
         <Icon icon="search" size="sm" color="inherit" />
       </span>
       <input
-        ref={mergeRefs(ref, inputRef)}
+        ref={useMergedRefs(ref, inputRef)}
         type="text"
         role="combobox"
         aria-expanded={ctx?.isOpen ?? true}

package/src/CommandPalette/CommandPaletteItem.tsx

@@ -14,7 +14,7 @@
 import {useCallback, useEffect, useMemo, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps} from '../utils';
 import {composeEventHandlers} from '../utils/composeEventHandlers';
 import {
   colorVars,
@@ -27,6 +27,7 @@ import {useCommandPaletteContext} from './CommandPaletteContext';
 import {useDialogContext} from '../Dialog/DialogContext';
 import {themeProps} from '../utils/themeProps';
 
+import {useMergedRefs} from '../hooks/useMergedRefs';
 const HOVER_HOVER = '@media (hover: hover)';
 
 const styles = stylex.create({
@@ -191,7 +192,7 @@ export function CommandPaletteItem({
 
   return (
     <div
-      ref={mergeRefs(ref, itemRef)}
+      ref={useMergedRefs(ref, itemRef)}
       {...props}
       id={ctx && itemIndex >= 0 ? ctx.getItemId(itemIndex) : undefined}
       role="option"

package/src/ContextMenu/ContextMenu.doc.mjs

@@ -58,6 +58,11 @@ export const docs = {
       description: 'Accessible name for the menu surface, announced when it opens.',
       default: "'Context menu'",
     },
+    {
+      name: 'onOpenChange',
+      type: '(isOpen: boolean) => void',
+      description: 'Callback fired when the menu opens or closes.',
+    },
     {
       name: 'isDisabled',
       type: 'boolean',

package/src/ContextMenu/ContextMenu.tsx

@@ -63,7 +63,7 @@ import {
   easeVars,
   shadowVars,
 } from '../theme/tokens.stylex';
-import {mergeProps, mergeRefs, isImeKeyEvent} from '../utils';
+import {mergeProps, isImeKeyEvent} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {StyleXStyles} from '../theme/types';
 import {themeProps} from '../utils/themeProps';
@@ -75,6 +75,7 @@ import type {
   DropdownMenuSection,
 } from '../DropdownMenu/DropdownMenu';
 
+import {useMergedRefs} from '../hooks/useMergedRefs';
 const styles = stylex.create({
   // Trigger wrapper: suppress the iOS long-press callout/selection so the
   // long-press opens our context menu instead of the native text/callout UI.
@@ -467,7 +468,7 @@ export function ContextMenu({
   return (
     <>
       <div
-        ref={mergeRefs(ref, triggerRef)}
+        ref={useMergedRefs(ref, triggerRef)}
         {...triggerProps}
         onContextMenu={handleContextMenu}
         {...longPressHandlers}
@@ -482,7 +483,7 @@ export function ContextMenu({
         )}>
         {children}
         <span
-          ref={mergeRefs(cursorAnchorRef, layer.ref)}
+          ref={useMergedRefs(cursorAnchorRef, layer.ref)}
           aria-hidden="true"
           {...mergeProps(stylex.props(styles.cursorAnchor), {
             style: {

package/src/DateInput/DateInput.doc.mjs

@@ -156,6 +156,13 @@ export const docs = {
         "How the committed date value is displayed. Named values are reused from Timestamp's format vocabulary: 'date' shows 'Mar 21, 2026', 'date_long' shows 'March 21, 2026', 'date_weekday' shows 'Wed, Mar 21, 2026', 'system_date' shows '2026-03-21'. A function receives the ISO value and returns a custom string. Applies only to the committed value, never to text being typed.",
       default: "'date_long'",
     },
+    {
+      name: 'nativePicker',
+      type: "'touch' | 'always' | 'never'",
+      description:
+        "Which surface draws the date picker. 'touch' (the default) hands a touch device to the browser/OS: the field becomes an input type=date and the platform draws the picker (the iOS wheel, the Android calendar dialog); 'always' does that wherever the browser supports input type=date; 'never' keeps Astryx's own pickers everywhere (the bottom-sheet picker on a finger, the calendar popover on a mouse). Use 'never' for a field that needs weekStartsOn, numberOfMonths or dateConstraints, none of which a native picker can express. format and placeholder still apply in native mode; min and max are forwarded, but a native picker may not show them (on iOS an out-of-range date can be selected and is refused on commit rather than greyed out).",
+      default: "'touch'",
+    },
     {
       name: 'width',
       type: 'SizeValue',
@@ -437,6 +444,13 @@ export const docsZh = {
         "已选日期的显示格式。命名值复用 Timestamp 的格式词汇：'date' 显示 'Mar 21, 2026'，'date_long' 显示 'March 21, 2026'，'date_weekday' 显示 'Wed, Mar 21, 2026'，'system_date' 显示 '2026-03-21'。函数接收 ISO 值并返回自定义字符串。仅作用于已提交的值，不影响正在输入的文本。",
       default: "'date_long'",
     },
+    {
+      name: 'nativePicker',
+      type: "'touch' | 'always' | 'never'",
+      description:
+        "由哪个界面绘制日期选择器。'touch'（默认）在触摸设备上交给浏览器/操作系统：字段变为 input type=date，由平台绘制选择器（iOS 滚轮、Android 日历对话框）；'always' 在所有支持 input type=date 的浏览器上都这样做；'never' 始终使用 Astryx 自带的选择器（触摸设备用底部弹出选择器，鼠标设备用日历弹出层）。需要 weekStartsOn、numberOfMonths 或 dateConstraints 的字段应使用 'never'，原生选择器无法表达这些。原生模式下 format 和 placeholder 仍然生效；min 和 max 会传递给原生控件，但原生选择器可能不会显示这些限制（在 iOS 上仍可选中超出范围的日期，会在提交时被拒绝，而不是变灰）。",
+      default: "'touch'",
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -537,6 +551,8 @@ export const docsDense = {
     weekStartsOn: 'first day of week in calendar (0=Sunday, or name e.g. "mon")',
     format:
       "committed-value display: 'date_long' (default, March 21, 2026), 'date' (Mar 21, 2026), 'date_weekday' (Wed, Mar 21, 2026), 'system_date' (2026-03-21), or (iso)=>string; reuses Timestamp vocabulary. Committed value only, not while typing.",
+    nativePicker:
+      "which surface draws the picker: 'touch' (default) = browser/OS on a coarse pointer, 'always', 'never' = Astryx's own everywhere. use 'never' for weekStartsOn/numberOfMonths/dateConstraints. format+placeholder still apply; min/max forwarded but not necessarily shown by the OS picker, refused on commit instead.",
     xstyle: 'StyleX styles for layout; must be stylex.create() value',
   },
 };

package/src/DateInput/DateInput.tsx

@@ -62,6 +62,7 @@ import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {usePopover} from '../Popover';
+import {NativeDateField} from './NativeDateField';
 import {TouchDateField} from './TouchDateField';
 import {useTooltip} from '../Tooltip';
 import {getInputARIA, isImeKeyEvent, parseDateInput} from '../utils';
@@ -150,6 +151,17 @@ export type DateInputSize = keyof typeof sizeStyles;
  * types stay in compile-time lockstep: renaming or removing one of these
  * members from `TimestampFormat` breaks this type at build time.
  */
+/**
+ * When DateInput hands date picking to the browser/OS instead of its own
+ * surfaces.
+ *
+ * - `'touch'`: native on touch devices (coarse pointer), Astryx's calendar
+ *   popover on mouse-driven ones
+ * - `'always'`: native wherever the browser supports `<input type="date">`
+ * - `'never'`: Astryx's own pickers everywhere
+ */
+export type DateInputNativePicker = 'touch' | 'always' | 'never';
+
 export type DateInputFormat = Extract<
   TimestampFormat,
   'date' | 'date_long' | 'date_weekday' | 'system_date'
@@ -161,7 +173,7 @@ export type {
   InputStatus as DateInputStatus,
   InputStatusType as DateInputStatusType,
 } from '../Field';
-import {mergeProps, mergeRefs, isFocusDetached} from '../utils';
+import {mergeProps, isFocusDetached} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
@@ -169,6 +181,7 @@ import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {stableClassName} from '../naming';
 import {useTranslator, InternationalizationContext} from '../i18n';
 
+import {useMergedRefs} from '../hooks/useMergedRefs';
 export interface DateInputProps extends Omit<
   BaseProps,
   'onChange' | 'defaultValue'
@@ -360,6 +373,40 @@ export interface DateInputProps extends Omit<
    * ```
    */
   format?: DateInputFormat | ((value: ISODateString) => string);
+
+  /**
+   * When date picking is handed to the browser/OS instead of Astryx's own
+   * surfaces: the field becomes an `<input type="date">` and the platform
+   * draws the picker — the iOS wheel, the Android calendar dialog — with the
+   * OS's own hit areas, momentum scrolling, locale and accessibility
+   * settings.
+   *
+   * - `'touch'` (default): native on touch devices (coarse pointer), the text
+   *   field and calendar popover on mouse-driven ones
+   * - `'always'`: native wherever the browser supports `<input type="date">`
+   * - `'never'`: Astryx's own pickers everywhere — the touch picker on a
+   *   finger, the calendar popover on a mouse
+   *
+   * `format` and `placeholder` still apply in native mode: DateInput paints
+   * the closed field's text itself, over the control. `numberOfMonths` and
+   * `weekStartsOn` do not — they describe a calendar grid the native picker
+   * does not have — so a field that needs either should pass `'never'`.
+   *
+   * `min` and `max` are forwarded, but note that a native picker may not
+   * *show* them: on iOS they are constraint-validation flags rather than
+   * clamps, so an out-of-range date can be selected and is refused on commit
+   * (announced to assistive technology) rather than being greyed out in the
+   * picker. `dateConstraints` is enforced the same way, on commit, and is
+   * reason enough to prefer `'never'` on a field that uses it.
+   *
+   * @default 'touch'
+   * @example
+   * ```
+   * // Astryx's own touch picker instead of the platform's
+   * <DateInput label="Event date" value={date} onChange={setDate} nativePicker="never" />
+   * ```
+   */
+  nativePicker?: DateInputNativePicker;
 }
 
 /**
@@ -739,7 +786,7 @@ function PointerDateField({
         />
       </button>
       <input
-        ref={mergeRefs(ref, inputRef)}
+        ref={useMergedRefs(ref, inputRef)}
         id={id}
         type="text"
         role="combobox"
@@ -886,7 +933,13 @@ PointerDateField.displayName = 'PointerDateField';
  */
 export function DateInput(props: DateInputProps) {
   const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
+  const nativePicker = props.nativePicker ?? 'touch';
 
+  // The platform's picker, where the consumer asked for it — see the
+  // `nativePicker` prop for what that trades away.
+  if (nativePicker === 'always' || (nativePicker === 'touch' && isTouch)) {
+    return <NativeDateField {...props} />;
+  }
   return isTouch ? (
     <TouchDateField {...props} />
   ) : (