@astryxdesign/core 0.7.8 → 0.7.9-canary.0200dfe

package/src/PowerSearch/PowerSearch.tsx

@@ -86,6 +86,7 @@ import {
 import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {themeProps} from '../utils/themeProps';
 import {useLocale} from '../i18n/useLocale';
+import {useCalendarSystem} from '../i18n/useCalendarSystem';
 import type {Locale} from '../i18n/types';
 import type {SearchableItem} from '../Typeahead/types';
 import type {
@@ -242,6 +243,15 @@ const sheetTriggerStyles = stylex.create({
     },
     outline: 'none',
   },
+  // A placeholder longer than the trigger ends in an ellipsis inside it, as
+  // Selector's value does. It never runs under the result count or past the
+  // field's border.
+  placeholder: {
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
   // Once a token is present the empty trigger covers the token lane instead
   // of reserving 40px or wrapping onto an otherwise blank row.
   triggerWithTokens: {
@@ -590,6 +600,7 @@ export function PowerSearch({
   const searchSource = usePowerSearchSource(config, maxSearchResults);
   const t = useComponentTranslator();
   const locale = useLocale();
+  const calendar = useCalendarSystem(undefined, 'PowerSearch');
   const label = labelFromProps ?? t('@astryx.powersearch.label');
   const placeholder =
     placeholderFromProps ?? t('@astryx.powersearch.placeholder');
@@ -714,6 +725,7 @@ export function PowerSearch({
               10,
             ),
             locale,
+            calendar,
             undefined,
             undefined,
             timezoneID,
@@ -721,7 +733,7 @@ export function PowerSearch({
         : null;
       return {label, value, full: value != null ? `${label} ${value}` : label};
     },
-    [config, maxTokenLength, t, locale, timezoneID],
+    [config, maxTokenLength, t, locale, timezoneID, calendar],
   );
   // The built-in token being edited. A token from a `components` override
   // names itself, so its editor keeps the plain popover.
@@ -872,6 +884,7 @@ export function PowerSearch({
             t,
             locale,
             timezoneID,
+            calendar,
           )
         : '';
 
@@ -890,7 +903,7 @@ export function PowerSearch({
         },
       };
     });
-  }, [filters, config, maxTokenLength, timezoneID, t, locale]);
+  }, [filters, config, maxTokenLength, timezoneID, t, locale, calendar]);
 
   // Handle tokenizer onChange (field selected from typeahead)
   const handleTokenizerChange = useCallback(
@@ -1544,7 +1557,11 @@ export function PowerSearch({
                   sheetTriggerStyles.trigger,
                   filters.length > 0 && sheetTriggerStyles.triggerWithTokens,
                 )}>
-                {filters.length === 0 ? placeholder : null}
+                {filters.length === 0 ? (
+                  <span {...stylex.props(sheetTriggerStyles.placeholder)}>
+                    {placeholder}
+                  </span>
+                ) : null}
               </button>
             </div>
             {(endContent || isRenderable(resultCountText)) && (

package/src/PowerSearch/PowerSearchBottomSheet.tsx

@@ -76,6 +76,7 @@ import {useAnnounce, type AnnounceFn} from '../hooks/useAnnounce';
 import type {TranslatorFn} from '../i18n';
 import {useListFormatter} from '../i18n/useListFormatter';
 import {useLocale} from '../i18n/useLocale';
+import {useCalendarSystem} from '../i18n/useCalendarSystem';
 import {SheetConfirmation} from '../internal/SheetConfirmation';
 import {useDismissSearchOnTouchDrag} from '../internal/useDismissSearchOnTouchDrag';
 import {
@@ -968,6 +969,7 @@ export function PowerSearchBottomSheet({
   const {NestedEditor} = editors;
   const t = useComponentTranslator();
   const locale = useLocale();
+  const calendar = useCalendarSystem(undefined, 'PowerSearch');
   const formatList = useListFormatter();
   const isInteractive = !isDisabled && !isReadOnly;
 
@@ -1524,13 +1526,14 @@ export function PowerSearchBottomSheet({
               filter.value,
               Number.MAX_SAFE_INTEGER,
               locale,
+              calendar,
               t,
               formatList,
               timezoneID,
             );
       return {label, value};
     },
-    [config, editors, formatList, locale, t, timezoneID],
+    [calendar, config, editors, formatList, locale, t, timezoneID],
   );
   const describeFilter = useCallback(
     (filter: PowerSearchFilter): string => {

package/src/PowerSearch/PowerSearchToken.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Token} from '../Token';
 import {useLocale} from '../i18n/useLocale';
+import {useCalendarSystem} from '../i18n/useCalendarSystem';
 import {fontWeightVars} from '../theme/tokens.stylex';
 import {formatFilterValue} from './formatFilterValue';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
@@ -47,6 +48,7 @@ export function PowerSearchToken({
   const config = useInternalConfig(configProp);
   const t = useComponentTranslator();
   const locale = useLocale();
+  const calendar = useCalendarSystem(undefined, 'PowerSearchToken');
 
   const fieldLabel = field.label;
   const resolvedOperatorLabel = resolveOperatorLabel(operator, t);
@@ -68,6 +70,7 @@ export function PowerSearchToken({
     t,
     locale,
     timezoneID,
+    calendar,
   );
 
   const valueContent = valueStr ? (

package/src/PowerSearch/formatFilterValue.ts

@@ -2,7 +2,7 @@
 
 /**
  * @file formatFilterValue.ts
- * @input OperatorValue, FilterValue, config
+ * @input OperatorValue, FilterValue, config, locale, time zone, calendar
  * @output Formatted display string for a filter value
  * @position Pure utility; consumed by PowerSearch token rendering
  *
@@ -13,6 +13,10 @@
 import type {OperatorValue, FilterValue, EnumItem} from './types';
 import type {InternalConfig} from './useInternalConfig';
 import type {Locale, TranslatorFn} from '../i18n';
+import {
+  formatCalendarInstant,
+  type CalendarSystem,
+} from '../utils/calendarSystem';
 import {truncateCharacters} from '../utils/characters';
 import {registerEnglishFallback} from '../i18n/englishFallback';
 import english from '../i18n/generated-english/PowerSearch/formatFilterValue.generated';
@@ -67,25 +71,24 @@ export function formatDateAbsolute(
   locale: Locale,
   timezoneID: string | undefined,
   isDateOnly = true,
+  calendar: CalendarSystem = 'gregory',
 ): string {
   const options: Intl.DateTimeFormatOptions = isDateOnly
-    ? {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-        timeZone: resolveDateZone(timezoneID, true),
-        calendar: 'gregory',
-      }
+    ? {year: 'numeric', month: 'short', day: 'numeric'}
     : {
         year: 'numeric',
         month: 'short',
         day: 'numeric',
         hour: 'numeric',
         minute: '2-digit',
-        timeZone: resolveDateZone(timezoneID, false),
-        calendar: 'gregory',
       };
-  return new Intl.DateTimeFormat(locale, options).format(unixSeconds * 1000);
+  return formatCalendarInstant(
+    calendar,
+    new Date(unixSeconds * 1000),
+    options,
+    locale,
+    resolveDateZone(timezoneID, isDateOnly),
+  );
 }
 
 function formatRelativeDate(value: string): string {
@@ -100,6 +103,11 @@ function formatDateRange(
   return t('@astryx.powersearch.valueEditor.dateRange');
 }
 
+/**
+ * The display text of a filter value. A `date_absolute` value is written in
+ * `calendar`, which defaults to Gregorian; PowerSearch passes the calendar that
+ * its provider resolves.
+ */
 export function formatFilterValue(
   _config: InternalConfig,
   operatorValue: OperatorValue,
@@ -108,6 +116,7 @@ export function formatFilterValue(
   t: TranslatorFn,
   locale: Locale,
   timezoneID?: string,
+  calendar: CalendarSystem = 'gregory',
 ): string {
   switch (filterValue.type) {
     case 'empty':
@@ -210,6 +219,7 @@ export function formatFilterValue(
           timezoneID,
           operatorValue.type !== 'date_absolute' ||
             operatorValue.isDateOnly !== false,
+          calendar,
         ),
         maxLength,
       );

package/src/PowerSearch/formatTokenValue.ts

@@ -3,7 +3,8 @@
 /**
  * @fileoverview The text a PowerSearch filter token shows for a value.
  *
- * @input `OperatorValue`, `FilterValue`, a width budget, and the locale.
+ * @input `OperatorValue`, `FilterValue`, a width budget, the locale, and the
+ * calendar.
  * @output `formatTokenValueText` — one string, or null for an empty value.
  * @position Shared by the token itself (`PowerSearch.tsx`) and the sheet
  * presentation's Filters rows and removal announcement
@@ -13,6 +14,7 @@
 
 import type {OperatorValue, FilterValue, EnumItem} from './types';
 import type {Locale, TranslatorFn} from '../i18n';
+import type {CalendarSystem} from '../utils/calendarSystem';
 import {truncateCharacters} from '../utils/characters';
 import {formatDateAbsolute, formatSharedNumber} from './formatFilterValue';
 import {registerEnglishFallback} from '../i18n/englishFallback';
@@ -103,6 +105,8 @@ function formatListText(
  * the sheet presentation's Filters rows and its removal announcement — can
  * use the same words and the same zone handling. `maxLength` is the token's
  * width budget; pass `Number.MAX_SAFE_INTEGER` for the untruncated text.
+ * A `date_absolute` value is written in `calendar`, the calendar that the
+ * provider resolves.
  * With `t`, the list, date-range and nested summaries resolve through the
  * catalog (`@astryx.powersearch.valueEditor.*`); without it they are the
  * token's own literals. With `formatList` (the provider's list formatter),
@@ -114,6 +118,7 @@ export function formatTokenValueText(
   filterValue: FilterValue,
   maxLength: number,
   locale: Locale,
+  calendar: CalendarSystem,
   t?: TranslatorFn,
   formatList?: ListFormatFn,
   timezoneID?: string,
@@ -182,6 +187,7 @@ export function formatTokenValueText(
           timezoneID,
           operatorValue.type !== 'date_absolute' ||
             operatorValue.isDateOnly !== false,
+          calendar,
         ),
         maxLength,
       );

package/src/RadioList/RadioListItem.doc.mjs

@@ -8,7 +8,7 @@ export const docs = {
   displayName: 'Radio List Item',
   isHiddenFromOverview: true,
   description:
-    'Individual radio item with label, description, and content slots.',
+    'Individual radio item with label, description, and content slots. Under a coarse pointer an enabled option’s target grows toward 44 px through an invisible hit area. It never shrinks below the row and stops at half the gap to a closer neighbour; the row keeps its size. That hit area is the row’s `::after`, so decorate a row with a child.',
   // RadioListItem requires RadioList context; wrap it so the preview doesn't throw.
   playground: {
     defaults: {value: 'option-1', label: 'Option'},
@@ -97,7 +97,8 @@ export const docsZh = {
   name: 'RadioListItem',
   isHiddenFromOverview: true,
   displayName: 'Radio List Item',
-  description: '单个单选选项，包含标签、描述和内容插槽。',
+  description:
+    '单个单选选项，包含标签、描述和内容插槽。在粗指针（触摸）下，已启用选项的目标通过不可见的点击区域向 44 px 扩展。它不小于所在行，与相邻控件较近时止于间距的一半；行尺寸不变。该点击区域是行的 `::after`，因此请用子元素装饰行。',
   props: [
     {
       name: 'label',

package/src/RadioList/RadioListItem.tsx

@@ -32,9 +32,13 @@ import {rtlStyles} from '../utils/rtlStyles';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {usePressFeedback} from '../hooks/usePressFeedback';
+import {useMergedRefs} from '../hooks/useMergedRefs';
+import {useTouchHitArea} from '../utils/touchHitArea';
+import {touchHitAreaStyles} from '../utils/touchHitArea.stylex';
 import {useIndicator} from '../Indicator/useIndicator';
 import {Item, type ItemAlign} from '../Item/Item';
 import {themeProps} from '../utils/themeProps';
+import {rowPressLayerStyles} from '../privateAttributes/press.stylex';
 
 // The touch press's paint, declared by the shared overlay styles on the
 // element the controller writes to (`pressedAlpha`) at the press's strength,
@@ -147,11 +151,6 @@ const rowStyles = stylex.create({
     // Suppress Item's interactive hover/press background so the resting and
     // hovered row look identical by default (a theme can restyle either).
     backgroundColor: 'transparent',
-    // ...and the touch press's overlay image, for the same reason: under a
-    // finger only the radio circle paints, as under a mouse. The press's
-    // strength still lands on the row, which is where the layer over the
-    // circle reads it.
-    backgroundImage: 'none',
   },
   // The mouse press (a finger's lives on `data-astryx-press`): the row is
   // pressed, but not through a nested link or button, which keep their own
@@ -309,6 +308,13 @@ export function RadioListItem({
   // `<label htmlFor>` would double-fire under delegation.
   const radioRef = useRef<HTMLInputElement>(null);
 
+  // Under a coarse pointer an option's row grows toward 44 px through an
+  // invisible band, and the row keeps its size. A tap on the band lands on
+  // the row, which hands it to the radio. The band's insets stay live while
+  // the row takes taps, and clear when it stops.
+  const watchRowHitArea = useTouchHitArea(!isDisabled);
+  const mergedRowRef = useMergedRefs(ref, watchRowHitArea);
+
   const radioCircle = (
     <div
       {...stylex.props(
@@ -391,7 +397,7 @@ export function RadioListItem({
 
   return (
     <Item
-      ref={ref}
+      ref={mergedRowRef}
       {...(isDisabled ? undefined : pressable)}
       startContent={mediaContent}
       // Delegate row-surface clicks (label text, description, and the empty
@@ -414,12 +420,16 @@ export function RadioListItem({
           // the painting row element (Item), the same element that carries the
           // theme target, so a theme's hover styling stays in step with the tint.
           !isDisabled && indicatorScope,
+          // The row keeps no press paint of its own: the circle paints, and
+          // reads the strength whose release the row keeps.
+          rowPressLayerStyles.cellWithoutLayer,
           // Restore the bare default look: zero Item's padding/radius and its
           // interactive hover/press background. Applied after Item's own base
           // styles so it wins within the base layer; a `radio-list-item` theme
           // still overrides it from the higher `astryx-theme` layer.
           rowStyles.root,
           !isDisabled && rowStyles.press,
+          !isDisabled && touchHitAreaStyles.layer,
           xstyle,
         ] as StyleXStyles
       }

package/src/Resizable/Resizable.doc.mjs

@@ -45,7 +45,7 @@ export const docs = {
     description:
       'Hook-based resizable panel system. useResizable() manages size state ' +
       'and ResizeHandle provides the interactive pill-grip separator. ' +
-      'Pass resize props to existing layout components via their resizable prop.',
+      "Pass the hook's output to existing layout components via their resizable prop.",
     bestPractices: [
       {
         guidance: true,
@@ -56,7 +56,7 @@ export const docs = {
         guidance: true,
         description:
           'Use useResizable() with existing Astryx layout components. ' +
-          'Pass the returned props to the resizable prop on LayoutPanel or SideNav.',
+          'Pass its output to the resizable prop on LayoutPanel, ResizeHandle or SideNav; any other element can use its size.',
       },
       {
         guidance: true,
@@ -88,7 +88,7 @@ export const docs = {
       examples: [
         {
           label: 'Structured fixed pixels',
-          code: `const region = useResizable({
+          code: `const resizable = useResizable({
   defaultSize: pixel(333),
   containerRef,
 });`,
@@ -101,16 +101,44 @@ import {percent, pixel} from '@astryxdesign/core/Resizable/utils';
 
 const containerRef = useRef<HTMLDivElement>(null);
 
-const region = useResizable({
+const resizable = useResizable({
   defaultSize: percent(40, {min: pixel(333)}),
   containerRef,
 });
 
-<ResizeHandle direction="horizontal" resizable={region.props} />;`,
+<ResizeHandle direction="horizontal" resizable={resizable} />;`,
+        },
+        {
+          label: 'Any element, sized by the hook',
+          code: `'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {Card} from '@astryxdesign/core/Card';
+import {ResizeHandle, useResizable} from '@astryxdesign/core/Resizable';
+import {Stack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+
+const styles = stylex.create({
+  // The hook's size as a dynamic style; the card keeps it in the row.
+  preview: (width: number) => ({width, flexShrink: 0}),
+});
+
+export default function InvoicePreviewSplit() {
+  const resizable = useResizable({defaultSize: 320, minSize: 240, maxSize: 480});
+  return (
+    <Stack direction="horizontal">
+      <Card xstyle={styles.preview(resizable.size)}>
+        <Text>Invoice INV-2041, $1,280.00, due Nov 18</Text>
+      </Card>
+      <ResizeHandle resizable={resizable} label="Resize invoice preview" />
+      <Text>Line items, payments and notes for the selected invoice.</Text>
+    </Stack>
+  );
+}`,
         },
         {
           label: 'Live percentage floor',
-          code: `const region = useResizable({
+          code: `const resizable = useResizable({
   defaultSize: 0,
   minSize: percent(40, {min: pixel(333)}),
   containerRef,
@@ -118,7 +146,7 @@ const region = useResizable({
         },
         {
           label: 'Live percentage ceiling',
-          code: `const region = useResizable({
+          code: `const resizable = useResizable({
   defaultSize: 500,
   maxSize: percent(10, {max: pixel(400)}),
   containerRef,
@@ -236,9 +264,9 @@ const region = useResizable({
         },
         {
           name: 'resizable',
-          type: 'ResizableProps',
+          type: 'ResizableRegion | ResizableProps',
           description:
-            "Resize props from useResizable: connects handle to panel. Carries the region's axis ('horizontal' | 'vertical'), which must match this handle's direction.",
+            "The output of useResizable, or its props: connects handle to panel. Carries the region's axis ('horizontal' | 'vertical'), which must match this handle's direction.",
           required: true,
         },
         {
@@ -265,12 +293,12 @@ export const docsDense = {
   usage: {
     anatomy,
     description:
-      'Hook-based resizable panel system. useResizable() manages size state; ResizeHandle provides interactive pill-grip separator. Pass resize props to existing layout components via their resizable prop.',
+      'Hook-based resizable panel system. useResizable() manages size state; ResizeHandle provides interactive pill-grip separator. Pass the hook output to existing layout components via their resizable prop.',
     bestPractices: [
       {
         guidance: true,
         description:
-          'Use useResizable() w/ existing Astryx layout components. Pass returned props to resizable prop on LayoutPanel or SideNav.',
+          'Use useResizable() w/ existing Astryx layout components. Pass its output to resizable prop on LayoutPanel, ResizeHandle or SideNav.',
       },
       {
         guidance: true,
@@ -320,7 +348,7 @@ export const docsDense = {
         pillPlacement:
           'which side of divider pill sits on. auto = content side (derived from isReversed), flips when collapsed; start = left/top, end = right/bottom, center = centered on divider. Moves only the pill (still draggable); grab zone stays on the divider',
         label: 'accessible label for separator',
-        resizable: 'resize props from useResizable: connects handle to panel',
+        resizable: 'useResizable output or its props: connects handle to panel',
       },
     },
   ],

package/src/Resizable/ResizeHandle.tsx

@@ -12,7 +12,7 @@
  * embedded frame still arrive.
  */
 
-import {useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useReducer, useRef, useState} from 'react';
 import type {HTMLAttributes, ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
@@ -28,18 +28,29 @@ import {mergeProps, rtlStyles} from '../utils';
 import {
   getCollapseControls,
   getEffectiveMaxPx,
+  resizablePropsOf,
   type ResizableProps,
+  type ResizableRegion,
 } from './useResizable';
 import {
   createResizeGesture,
   type ResizeGesture,
   type ResizeGestureModel,
 } from './resizeGesture';
+import {
+  handOverPane,
+  registerResizeHandle,
+  resizablePaneFor,
+  watchResizablePanes,
+  type ResizablePane,
+} from './resizablePane';
 import {separatorAttributes} from './separatorAttributes';
 import {themeProps} from '../utils/themeProps';
 
 import {useDevWarning} from '../hooks/useDevWarning';
+import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
 import {
   registerEnglishFallback,
   useComponentTranslator,
@@ -369,8 +380,8 @@ export interface ResizeHandleProps extends Omit<
    */
   label?: string;
 
-  /** Resize props from useResizable region. */
-  resizable?: ResizableProps;
+  /** The output of `useResizable()`, or its `props`. */
+  resizable?: ResizableRegion | ResizableProps;
 
   /** Custom handle content. Overrides the default pill. */
   children?: ReactNode;
@@ -386,7 +397,7 @@ export interface ResizeHandleProps extends Omit<
  * @example
  * ```
  * <ResizeHandle
- *   resizable={sidebar.props}
+ *   resizable={resizable}
  *   direction="horizontal"
  *   hasDivider />
  * ```
@@ -401,13 +412,15 @@ export function ResizeHandle({
   isAlwaysVisible = true,
   pillPlacement = 'auto',
   label: labelFromProps,
-  resizable,
+  resizable: resizableValue,
   children,
   xstyle,
   className,
   ref,
   ...props
 }: ResizeHandleProps) {
+  const resizable =
+    resizableValue == null ? undefined : resizablePropsOf(resizableValue);
   const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.resizable.handle.label');
   const handleRef = useRef<HTMLDivElement>(null);
@@ -529,6 +542,55 @@ export function ResizeHandle({
     };
   }, [hasRegion, regionGesture]);
 
+  // --- The LayoutPanel beside a handle given `resizable` props ---
+
+  // A collapsing panel moves focus here, and the ring follows the last input.
+  const {ref: modalityRef} = useInteractionModalityTracking();
+  // A LayoutPanel at the region's size, with no `resizable` prop, has no
+  // controller to find it. This handle holds it collapsed with the region, so
+  // focus inside it moves here and it goes inert. A panel lent later is found
+  // at once.
+  const [, rerender] = useReducer((count: number) => count + 1, 0);
+  const heldPaneRef = useRef<ResizablePane | null>(null);
+  // The element goes in the handle registry, for a collapsing panel beside it
+  // to hand focus to. When the element goes, a held panel opens.
+  const registryRef = useCallback((element: HTMLDivElement | null) => {
+    if (element == null) {
+      return;
+    }
+    const unregister = registerResizeHandle(element);
+    return () => {
+      unregister();
+      heldPaneRef.current = handOverPane(
+        heldPaneRef.current,
+        null,
+        false,
+        null,
+      );
+    };
+  }, []);
+  const isRegionCollapsed = resizable?._isCollapsed ?? false;
+  // Syncs with the lent-panel registry. A panel lent or taken back re-renders
+  // this handle, so it looks for its pane again.
+  useEffect(
+    () => (hasRegion ? watchResizablePanes(rerender) : undefined),
+    [hasRegion],
+  );
+  // Syncs the held panel with the region's collapse state after each commit.
+  useIsomorphicLayoutEffect(() => {
+    const element = handleRef.current;
+    const pane =
+      hasRegion && element != null
+        ? resizablePaneFor(element, isReversed)
+        : null;
+    heldPaneRef.current = handOverPane(
+      heldPaneRef.current,
+      pane,
+      isRegionCollapsed,
+      element,
+    );
+  });
+
   // --- ARIA ---
   const sizeNow = resizable?._size;
   const minNow = resizable?._minSizePx;
@@ -587,7 +649,7 @@ export function ResizeHandle({
 
   return (
     <div
-      ref={useMergedRefs(ref, handleRef)}
+      ref={useMergedRefs(ref, handleRef, registryRef, modalityRef)}
       role="separator"
       {...aria}
       aria-label={label}