@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/Markdown/Markdown.test.tsx

@@ -1,5 +1,12 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+/**
+ * @file Markdown.test.tsx
+ * @input Markdown renderer, supported blocks and source-line plugin
+ * @output Semantic, flat-task identity and nested flow-task regressions
+ * @position Core Markdown unit tests
+ */
+
 import {
   describe,
   it,
@@ -13,6 +20,7 @@ import {render, screen, fireEvent} from '@testing-library/react';
 import type {ComponentProps, ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Markdown} from './Markdown';
+import {markdownSourceLinesPlugin} from './plugins';
 import type {
   MarkdownComponents,
   MarkdownInlinePlugin,
@@ -531,6 +539,48 @@ describe('Markdown', () => {
     expect(checkboxes).toHaveLength(2);
     expect((checkboxes[0] as HTMLInputElement).checked).toBe(true);
     expect((checkboxes[1] as HTMLInputElement).checked).toBe(false);
+    // Preserve the released flat pure-task grouping/naming path.
+    expect(document.querySelector('.astryx-checkbox-list')).not.toBeNull();
+    expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby');
+  });
+
+  it('keeps nested pure-task rows on the static marker path with source lines', () => {
+    render(
+      <Markdown plugins={[markdownSourceLinesPlugin]}>
+        {
+          '- [ ] Outer task\n  - [x] Inner task\n\n    388. Counter\n    389. Sibling'
+        }
+      </Markdown>,
+    );
+    expect(document.querySelector('.astryx-checkbox-list')).toBeNull();
+    const checkboxes = screen.getAllByRole<HTMLInputElement>('checkbox');
+    expect(checkboxes.map(input => input.checked)).toEqual([false, true]);
+    for (const input of checkboxes) {
+      expect(input).toHaveAttribute('aria-readonly', 'true');
+    }
+    expect(
+      Array.from(document.querySelectorAll('li'), item =>
+        item.getAttribute('data-source-line'),
+      ),
+    ).toEqual(['1', '2', '4', '5']);
+  });
+
+  it('uses the static task marker path for lists nested through a blockquote', () => {
+    render(
+      <Markdown>
+        {'- [ ] Outer task\n\n  > 388. Quoted counter\n  > 389. Quoted sibling'}
+      </Markdown>,
+    );
+    expect(document.querySelector('.astryx-checkbox-list')).toBeNull();
+    expect(screen.getAllByRole('checkbox')).toHaveLength(1);
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'aria-readonly',
+      'true',
+    );
+    expect(document.querySelector('blockquote ol')).toHaveAttribute(
+      'start',
+      '388',
+    );
   });
 
   it('keeps each task item checked or open in a list that mixes task and plain items (FR23)', () => {

package/src/Markdown/Markdown.tsx

@@ -4,12 +4,16 @@
 
 /**
  * @file Markdown.tsx
- * @input Markdown string, canonical AST, optional plugins and custom renderers
+ * @input Markdown string, canonical AST, optional plugins and custom renderers;
+ *   static document lists permit outside counter paint through ordered and
+ *   unordered ancestors. Flow-task
+ *   bodies use per-item first-line markers; paragraph-only task lists retain
+ *   their CheckboxList representation.
  * @output Exports Markdown component, MarkdownProps, and renderer contracts
  * @position Core implementation; renders markdown as Astryx components
  */
 
-import {Suspense, useMemo, useRef} from 'react';
+import {Suspense, useMemo, useRef, useState} from 'react';
 import type React from 'react';
 import {Fragment} from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -28,6 +32,8 @@ import {
 import type {TextDisplay} from '../theme/types';
 import {CodeBlock, Code} from '../CodeBlock';
 import {parseFenceLanguage} from '../CodeBlock/tokenizer';
+import {listedLanguage, sameCodeLanguageList} from '../CodeBlock/grammar';
+import type {CodeLanguage} from '../CodeBlock/grammar';
 import {CheckboxList} from '../CheckboxList/CheckboxList';
 import {CheckboxListItem} from '../CheckboxList/CheckboxListItem';
 import {Blockquote} from '../Blockquote/Blockquote';
@@ -319,6 +325,15 @@ export interface MarkdownProps<
    * literal text.
    */
   autolink?: 'gfm';
+  /**
+   * CodeBlock language values a fence may name: each one imported on its
+   * own, such as `graphql` from `@astryxdesign/core/CodeBlock/languages/graphql`,
+   * or made with `createCodeLanguage`. A fence whose language word is one of
+   * a listed value's identifiers renders with that value, ahead of a built-in
+   * with the same identifier; a later entry wins. Without it, fences render
+   * as they do today.
+   */
+  codeLanguages?: ReadonlyArray<CodeLanguage>;
 }
 
 // ---------------------------------------------------------------------------
@@ -576,8 +591,20 @@ const styles = stylex.create({
     '--container-padding-block-start': '0px',
     '--container-padding-block-end': '0px',
   },
+  // Static Markdown lists never host swipe actions. Let outside counter ink
+  // paint through both ordered and unordered ancestors; general List and
+  // swipe-capable rows retain their own inline clip (component:List FR9).
   blockIndent: {
     marginInline: `calc(-1 * ${spacingVars['--spacing-2']})`,
+    overflowInline: 'visible',
+  },
+  // Numbered document lists keep their ordinary text inset regardless of
+  // counter width, matching RichText's native outside markers (AST-061 FR11).
+  // These rows have no swipe actions: unlike general List, their outside ink
+  // may paint past the gutter instead of being clipped at a finite threshold.
+  markerGutter: {
+    marginInlineStart: `calc(-1 * (${spacingVars['--spacing-2']} + ${spacingVars['--spacing-4']}))`,
+    paddingInlineStart: spacingVars['--spacing-4'],
   },
   // HR
   hr: {
@@ -1326,6 +1353,8 @@ function renderBlock(
   components: Partial<MarkdownComponents> | undefined,
   preparedPlugins: PreparedMarkdownPlugins | undefined,
   t: TranslatorFn,
+  // Language values fences may name (component:Markdown FR30).
+  codeLanguages: ReadonlyArray<CodeLanguage> | undefined,
   headingProjection?: MarkdownHeadingProjection,
   // How many lists enclose this block (spec:AST-061 DEC-6).
   listDepth = 0,
@@ -1500,7 +1529,10 @@ function renderBlock(
       const diffLanguage = isDiff
         ? fence.language.match(/^\w*/)?.[0] || 'plaintext'
         : undefined;
-      const language = diffLanguage ?? legacyLanguage;
+      const fenceWord = diffLanguage ?? legacyLanguage;
+      // A listed language value claims its identifiers ahead of a built-in
+      // with the same identifier (component:Markdown FR30).
+      const language = listedLanguage(codeLanguages, fenceWord) ?? fenceWord;
       // A semantic-fence proposal claims its fence before the host's code
       // renderer (spec:AST-036 FR17). The host renderer, or the default Code
       // block without one, draws every unclaimed fence and is the fallback
@@ -1617,6 +1649,7 @@ function renderBlock(
             components,
             preparedPlugins,
             t,
+            codeLanguages,
             headingProjection,
             listDepth,
           ),
@@ -1660,6 +1693,7 @@ function renderBlock(
               components,
               preparedPlugins,
               t,
+              codeLanguages,
               headingProjection,
               listDepth,
             ),
@@ -1668,10 +1702,16 @@ function renderBlock(
       );
     }
     case 'list': {
-      // Detect task lists: all items have a checked state
+      // Preserve the released CheckboxList representation for paragraph-only
+      // pure task lists. Flow/nested task bodies use the shared per-item marker
+      // path below, which owns first-line placement and static outside paint.
       const isTaskList =
         node.children.length > 0 &&
-        node.children.every(item => item.checked != null);
+        node.children.every(
+          item =>
+            item.checked != null &&
+            item.children.every(block => block.type === 'paragraph'),
+        );
 
       if (isTaskList) {
         // Extract labels from task items — render as rich inline content
@@ -1739,6 +1779,7 @@ function renderBlock(
                         components,
                         preparedPlugins,
                         t,
+                        codeLanguages,
                         headingProjection,
                         listDepth + 1,
                       ),
@@ -1784,7 +1825,7 @@ function renderBlock(
             listStyle={node.ordered ? 'decimal' : 'disc'}
             density="compact"
             start={node.ordered ? node.start : undefined}
-            xstyle={styles.blockIndent}>
+            xstyle={[styles.blockIndent, node.ordered && styles.markerGutter]}>
             {node.children.map((item, i) => {
               const firstChild = item.children[0];
               const isInline =
@@ -1828,6 +1869,7 @@ function renderBlock(
                       components,
                       preparedPlugins,
                       t,
+                      codeLanguages,
                       headingProjection,
                       listDepth + 1,
                     ),
@@ -1835,7 +1877,7 @@ function renderBlock(
                 </>
               );
 
-              // A task item beside plain items keeps its own checked state
+              // Each task item on this shared list path keeps its checked state
               // (FR23): it shows a read-only checkbox where its marker
               // would be, named by its text.
               const firstParagraph = item.children.find(
@@ -1868,7 +1910,8 @@ function renderBlock(
                       listDepth % 3
                     ]
                   }
-                  task={task}>
+                  task={task}
+                  hasMarkerGutter={node.ordered}>
                   <ListItem
                     label={label}
                     {...(recordsSourceLines
@@ -2114,6 +2157,7 @@ export function Markdown<
   plugins,
   inlinePlugins,
   autolink,
+  codeLanguages: codeLanguagesProp,
   xstyle,
   className,
   style,
@@ -2122,6 +2166,13 @@ export function Markdown<
   ...props
 }: MarkdownProps<Plugins>): React.ReactElement {
   const t = useTranslator();
+  // Keep one list while it names the same values, so an inline
+  // `codeLanguages={[…]}` does not re-render every block on each parent
+  // render (adjusting state during render, not in an Effect).
+  const [codeLanguages, setCodeLanguages] = useState(codeLanguagesProp);
+  if (!sameCodeLanguageList(codeLanguages, codeLanguagesProp)) {
+    setCodeLanguages(codeLanguagesProp);
+  }
   const LinkComponent = useLinkComponent();
   // Links read the caller's handler when clicked, so a handler recreated on
   // every caller render does not invalidate the memoized document below.
@@ -2384,6 +2435,7 @@ export function Markdown<
         components,
         preparedPlugins,
         t,
+        codeLanguages,
         headingProjection,
       ),
     );
@@ -2405,6 +2457,7 @@ export function Markdown<
     preparedPlugins,
     t,
     headingProjection,
+    codeLanguages,
   ]);
 
   if (display === 'inline') {

package/src/Markdown/MarkdownTable.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y release-only
 
 /**
  * @file MarkdownTable.a11y.chromium.spec.ts

package/src/Markdown/__tests__/MarkdownNesting.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y release-only
 
 /**
  * @file MarkdownNesting.a11y.chromium.spec.ts

package/src/MobileNav/MobileNav.doc.mjs

@@ -133,7 +133,7 @@ export const docs = {
       name: 'MobileNavToggle',
       displayName: 'Mobile Nav Toggle',
       description:
-        'Hamburger button that opens/closes the mobile nav drawer. Reads open state from AppShell context automatically: does NOT accept isOpen or onOpenChange props. Renders nothing above the mobile breakpoint.',
+        'Hamburger button that opens/closes the mobile nav drawer. Reads open state from AppShell context automatically: does NOT accept isOpen or onOpenChange props. Renders nothing above the mobile breakpoint. Host attributes and DOM handlers (id, data-*, aria-*) reach the button; its aria-expanded and aria-controls stay component-owned, and a caller onClick runs after the toggle.',
       // The toggle renders null unless AppShell mobile context reports an
       // enabled mobile viewport — the default context outside AppShell never
       // does, so the Properties preview was an empty stage. appShellMobile
@@ -305,7 +305,7 @@ export const docsDense = {
     {
       name: 'MobileNavToggle',
       description:
-        'Hamburger button that opens/closes mobile nav drawer. Reads open state from AppShell context automatically. Renders nothing above mobile breakpoint.',
+        'Hamburger button that opens/closes mobile nav drawer. Reads open state from AppShell context automatically. Renders nothing above mobile breakpoint. Host attributes and handlers reach the button; aria-expanded/aria-controls stay owned.',
     },
   ],
   propDescriptions: {