@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/Collapsible/Collapsible.tsx

@@ -4,21 +4,15 @@
 
 /**
  * @file Collapsible.tsx
- * @input Uses React, StyleX, useCollapsible hook, CollapsibleGroupPresentationContext, getIcon, theme tokens
+ * @input Uses React, StyleX, useCollapsible hook, getIcon, theme tokens
  * @output Exports Collapsible component and CollapsibleProps
  * @position Collapsible content primitive — trigger toggles visibility of children
  *
  * Collapsible is a standalone primitive that makes any content collapsible.
  * It renders a trigger area (always visible) and a content area that toggles.
- * Handles state management, accessibility (aria-expanded + aria-controls linking
- * the trigger to its content region), and chevron indicator.
+ * Handles state management, accessibility (aria-expanded), and chevron indicator.
  *
  * Works standalone or coordinated by CollapsibleGroup via the `value` prop.
- * When the surrounding CollapsibleGroup enables `dividers`, each Collapsible
- * draws its own row chrome (borderBlockStart suppressed on :first-child, plus
- * density padding) from CollapsibleGroupPresentationContext — StyleX has no
- * child selectors, so the group cannot draw it from outside. The presentation
- * context is reset around children so nested collapsibles stay chrome-free.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Collapsible/index.ts (exports)
@@ -27,10 +21,9 @@
  * - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
  */
 
-import {use, useId, type ReactNode} from 'react';
+import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
-  borderVars,
   colorVars,
   typographyVars,
   fontWeightVars,
@@ -40,7 +33,6 @@ import {
   easeVars,
 } from '../theme/tokens.stylex';
 import {useCollapsible} from './useCollapsible';
-import {CollapsibleGroupPresentationContext} from './CollapsibleGroupContext';
 import {getIcon} from '../Icon/globalIconRegistry';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
@@ -65,16 +57,6 @@ const styles = stylex.create({
     color: colorVars['--color-text-primary'],
     textAlign: 'start',
     paddingBlock: 0,
-    // `all: unset` above wipes the UA focus outline; restore a keyboard-only
-    // focus ring using the standard token/offset (WCAG 2.4.7).
-    outline: {
-      default: null,
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
   },
   // Capsize: trim leading from text triggers
   triggerLabel: {
@@ -105,42 +87,8 @@ const styles = stylex.create({
   content: {
     paddingBlockStart: spacingVars['--spacing-1'],
   },
-  // Group divider chrome — a hairline above every item except the first.
-  // The group's wrapper (or 'all' mode) owns the outer edges.
-  divided: {
-    borderBlockStartWidth: {
-      default: borderVars['--border-width'],
-      ':first-child': '0',
-    },
-    borderBlockStartStyle: 'solid',
-    borderBlockStartColor: colorVars['--color-border'],
-  },
-});
-
-// Density padding for divided/padded accordion rows. paddingBlock mapping
-// follows Table's density scale (spacing-1/2/3); content only pads its end
-// so text doesn't sit on the divider below (block-start stays spacing-1).
-const densityStyles = stylex.create({
-  triggerCompact: {paddingBlock: spacingVars['--spacing-1']},
-  triggerBalanced: {paddingBlock: spacingVars['--spacing-2']},
-  triggerSpacious: {paddingBlock: spacingVars['--spacing-3']},
-  contentCompact: {paddingBlockEnd: spacingVars['--spacing-1']},
-  contentBalanced: {paddingBlockEnd: spacingVars['--spacing-2']},
-  contentSpacious: {paddingBlockEnd: spacingVars['--spacing-3']},
 });
 
-const triggerDensity = {
-  compact: densityStyles.triggerCompact,
-  balanced: densityStyles.triggerBalanced,
-  spacious: densityStyles.triggerSpacious,
-} as const;
-
-const contentDensity = {
-  compact: densityStyles.contentCompact,
-  balanced: densityStyles.contentBalanced,
-  spacious: densityStyles.contentSpacious,
-} as const;
-
 export interface CollapsibleProps extends BaseProps {
   /** Ref forwarded to the root element */
   ref?: React.Ref<HTMLDivElement>;
@@ -244,25 +192,14 @@ export function Collapsible({
     value,
   });
 
-  const presentation = use(CollapsibleGroupPresentationContext);
-  const isDivided = presentation != null && presentation.dividers !== 'none';
-  const density = presentation?.density ?? null;
-
   const chevronIcon = getIcon('chevronDown');
 
-  // Links the trigger to the region it shows/hides so assistive tech can move
-  // from the button to its controlled content (disclosure pattern).
-  const contentId = useId();
-
   return (
     <div
       ref={ref}
       {...mergeProps(
-        themeProps('collapsible', {
-          dividers: isDivided ? presentation.dividers : undefined,
-          density: density ?? undefined,
-        }),
-        stylex.props(styles.root, isDivided && styles.divided, xstyle),
+        themeProps('collapsible'),
+        stylex.props(styles.root, xstyle),
         className,
         style,
       )}
@@ -271,11 +208,7 @@ export function Collapsible({
         type="button"
         onClick={toggle}
         aria-expanded={isOpen}
-        aria-controls={contentId}
-        {...stylex.props(
-          styles.trigger,
-          density != null && triggerDensity[density],
-        )}>
+        {...stylex.props(styles.trigger)}>
         <span {...stylex.props(styles.triggerLabel)}>{trigger}</span>
         <span
           {...stylex.props(
@@ -286,19 +219,10 @@ export function Collapsible({
         </span>
       </button>
       <div
-        id={contentId}
-        {...stylex.props(
-          styles.content,
-          density != null && contentDensity[density],
-          !isOpen && styles.contentHidden,
-        )}>
-        {presentation != null ? (
-          <CollapsibleGroupPresentationContext value={null}>
-            {children}
-          </CollapsibleGroupPresentationContext>
-        ) : (
-          children
-        )}
+        {...(isOpen
+          ? stylex.props(styles.content)
+          : stylex.props(styles.content, styles.contentHidden))}>
+        {children}
       </div>
     </div>
   );

package/src/Collapsible/CollapsibleGroup.doc.mjs

@@ -7,7 +7,7 @@ export const docs = {
   subComponentOf: 'Collapsible',
   displayName: 'Collapsible Group',
   isHiddenFromOverview: true,
-  description: 'Coordinates multiple Collapsible instances so only one (single mode) or any number (multiple mode) can be open at a time. Renders no wrapper DOM element unless dividers are enabled.',
+  description: 'Coordinates multiple Collapsible instances so only one (single mode) or any number (multiple mode) can be open at a time. Renders no wrapper DOM element.',
   props: [
     {
       name: 'type',
@@ -30,17 +30,6 @@ export const docs = {
       type: '(value: string | string[]) => void',
       description: 'Callback invoked when the set of open items changes.',
     },
-    {
-      name: 'dividers',
-      type: "'between' | 'all' | 'none'",
-      description: "Divider style rendered around the group's items. 'between' draws hairlines between adjacent items; 'all' adds the group's top and bottom edges. When enabled, the group renders a wrapper div and items default to 'balanced' density. Pair with bare Collapsible children; Card-wrapped items provide their own separation.",
-      default: "'none'",
-    },
-    {
-      name: 'density',
-      type: "'compact' | 'balanced' | 'spacious'",
-      description: "Row density controlling trigger and content block padding on the group's items. Defaults to 'balanced' when dividers are shown; otherwise items keep their default unpadded look.",
-    },
     {
       name: 'children',
       type: 'ReactNode',
@@ -63,7 +52,7 @@ export const docsZh = {
   name: 'CollapsibleGroup',
   isHiddenFromOverview: true,
   displayName: 'Collapsible Group',
-  description: '协调多个 Collapsible 实例，使同一时间只有一个（single 模式）或任意数量（multiple 模式）可以展开。除非启用 dividers，否则不渲染包裹 DOM 元素。',
+  description: '协调多个 Collapsible 实例，使同一时间只有一个（single 模式）或任意数量（multiple 模式）可以展开。不渲染包裹 DOM 元素。',
   props: [
     {
       name: 'type',
@@ -86,17 +75,6 @@ export const docsZh = {
       type: '(value: string | string[]) => void',
       description: '展开项目集合变更时调用的回调。',
     },
-    {
-      name: 'dividers',
-      type: "'between' | 'all' | 'none'",
-      description: "渲染在组项目周围的分隔线样式。'between' 仅在相邻项目之间绘制细线；'all' 额外绘制组的顶部和底部边缘。启用后组会渲染一个包裹 div，且项目默认使用 'balanced' 密度。适合搭配裸 Collapsible 子项使用；用 Card 包裹的项目自带视觉分隔。",
-      default: "'none'",
-    },
-    {
-      name: 'density',
-      type: "'compact' | 'balanced' | 'spacious'",
-      description: "控制组内项目触发器和内容块内边距的行密度。显示分隔线时默认为 'balanced'；否则项目保持默认的无内边距外观。",
-    },
     {
       name: 'children',
       type: 'ReactNode',
@@ -110,14 +88,12 @@ export const docsDense = {
   name: 'CollapsibleGroup',
   isHiddenFromOverview: true,
   displayName: 'Collapsible Group',
-  description: 'coordinates multiple Collapsible instances; single or multiple open. no wrapper DOM unless dividers enabled.',
+  description: 'coordinates multiple Collapsible instances; single or multiple open. no wrapper DOM.',
   propDescriptions: {
     type: 'one or many items open simultaneously',
     defaultValue: 'default open item(s) (uncontrolled); string for single, array for multiple',
     value: 'controlled open item(s)',
     onChange: 'callback on open items change',
-    dividers: "row hairlines: 'between' items only, 'all' adds outer edges, 'none' (default); enables wrapper div + 'balanced' density; use bare Collapsible children",
-    density: "row padding 'compact' | 'balanced' | 'spacious'; defaults 'balanced' with dividers, else unpadded",
     children: 'Collapsible instances to coordinate',
   },
 };

package/src/Collapsible/CollapsibleGroup.test.tsx

@@ -77,22 +77,6 @@ describe('Collapsible', () => {
     expect(screen.getByText('Hidden content')).not.toBeVisible();
   });
 
-  it('links the trigger to its content region via aria-controls', () => {
-    render(
-      <Collapsible trigger="Details">
-        <p>Region content</p>
-      </Collapsible>,
-    );
-
-    const trigger = screen.getByRole('button', {name: /Details/});
-    const controlsId = trigger.getAttribute('aria-controls');
-    // aria-controls must be present and point at the real content region.
-    expect(controlsId).toBeTruthy();
-    const region = document.getElementById(controlsId as string);
-    expect(region).not.toBeNull();
-    expect(region).toContainElement(screen.getByText('Region content'));
-  });
-
   it('respects controlled isOpen/onOpenChange', async () => {
     const onOpenChange = vi.fn();
     const user = userEvent.setup();
@@ -127,36 +111,6 @@ describe('Collapsible', () => {
     expect(screen.getByText('Controlled content')).not.toBeVisible();
   });
 
-  it('self-toggles in uncontrolled mode even when onOpenChange is supplied', async () => {
-    // Regression: passing onOpenChange without isOpen must NOT make the
-    // component behave as controlled. Internal state should still drive
-    // visibility, and the callback should fire in addition.
-    const onOpenChange = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <Collapsible trigger="Uncontrolled" onOpenChange={onOpenChange}>
-        <p>Uncontrolled content</p>
-      </Collapsible>,
-    );
-
-    const trigger = screen.getByRole('button', {name: /Uncontrolled/});
-    // Starts open (defaultIsOpen defaults to true).
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-    expect(screen.getByText('Uncontrolled content')).toBeVisible();
-
-    // Click collapses via internal state AND notifies.
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    expect(screen.getByText('Uncontrolled content')).not.toBeVisible();
-    expect(onOpenChange).toHaveBeenNthCalledWith(1, false);
-
-    // Click again re-expands — proving the component isn't stuck.
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-    expect(screen.getByText('Uncontrolled content')).toBeVisible();
-    expect(onOpenChange).toHaveBeenNthCalledWith(2, true);
-  });
-
   it('renders chevron indicator', () => {
     render(
       <Collapsible trigger="With Chevron">
@@ -443,276 +397,4 @@ describe('CollapsibleGroup', () => {
       expect(trigger).toHaveAttribute('aria-expanded', 'true');
     });
   });
-
-  describe('dividers', () => {
-    function getItem(name: RegExp): HTMLElement {
-      const root = screen
-        .getByRole('button', {name})
-        .closest('.astryx-collapsible');
-      expect(root).not.toBeNull();
-      return root as HTMLElement;
-    }
-
-    it('renders no wrapper DOM by default and with dividers="none"', () => {
-      const {container, rerender} = render(
-        <CollapsibleGroup>
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      expect(container.querySelector('.astryx-collapsible-group')).toBeNull();
-
-      rerender(
-        <CollapsibleGroup dividers="none">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      expect(container.querySelector('.astryx-collapsible-group')).toBeNull();
-    });
-
-    it('renders a wrapper with data attributes when dividers are enabled', () => {
-      const {container} = render(
-        <CollapsibleGroup dividers="between">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-          <Collapsible trigger="Item B" value="b">
-            <p>Content B</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      const wrapper = container.querySelector('.astryx-collapsible-group');
-      expect(wrapper).not.toBeNull();
-      expect(wrapper).toHaveAttribute('data-dividers', 'between');
-      // Divided groups default to balanced density
-      expect(wrapper).toHaveAttribute('data-density', 'balanced');
-      expect(wrapper).toContainElement(getItem(/Item A/));
-      expect(wrapper).toContainElement(getItem(/Item B/));
-    });
-
-    it('reflects dividers and density on each item', () => {
-      render(
-        <CollapsibleGroup dividers="all" density="compact">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      const item = getItem(/Item A/);
-      expect(item).toHaveAttribute('data-dividers', 'all');
-      expect(item).toHaveAttribute('data-density', 'compact');
-    });
-
-    it('does not reflect divider chrome on items without dividers', () => {
-      render(
-        <CollapsibleGroup>
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      const item = getItem(/Item A/);
-      expect(item).not.toHaveAttribute('data-dividers');
-      expect(item).not.toHaveAttribute('data-density');
-    });
-
-    it('applies density without dividers (and without a wrapper)', () => {
-      const {container} = render(
-        <CollapsibleGroup density="spacious">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      expect(container.querySelector('.astryx-collapsible-group')).toBeNull();
-      expect(getItem(/Item A/)).toHaveAttribute('data-density', 'spacious');
-    });
-
-    it('does not leak divider chrome into nested collapsibles', () => {
-      render(
-        <CollapsibleGroup dividers="between" defaultValue="outer">
-          <Collapsible trigger="Outer" value="outer">
-            <Collapsible trigger="Nested">
-              <p>Nested content</p>
-            </Collapsible>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      expect(getItem(/Outer/)).toHaveAttribute('data-dividers', 'between');
-      expect(getItem(/Nested/)).not.toHaveAttribute('data-dividers');
-      expect(getItem(/Nested/)).not.toHaveAttribute('data-density');
-    });
-
-    it('keeps group coordination working with dividers enabled', async () => {
-      const user = userEvent.setup();
-      render(
-        <CollapsibleGroup type="single" dividers="between" defaultValue="a">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-          <Collapsible trigger="Item B" value="b">
-            <p>Content B</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      expect(screen.getByText('Content A')).toBeVisible();
-      await user.click(screen.getByRole('button', {name: /Item B/}));
-      expect(screen.getByText('Content A')).not.toBeVisible();
-      expect(screen.getByText('Content B')).toBeVisible();
-    });
-
-    it('applies xstyle/className/style to the wrapper in divider mode', () => {
-      const {container} = render(
-        <CollapsibleGroup
-          dividers="between"
-          className="custom-class"
-          data-testid="group">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      const wrapper = container.querySelector('.astryx-collapsible-group');
-      expect(wrapper).toHaveClass('custom-class');
-      expect(wrapper).toHaveAttribute('data-testid', 'group');
-    });
-
-    it('forwards ref to the wrapper in divider mode', () => {
-      const ref = {current: null as HTMLElement | null};
-      const {container} = render(
-        <CollapsibleGroup dividers="between" ref={ref}>
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      expect(ref.current).toBe(
-        container.querySelector('.astryx-collapsible-group'),
-      );
-    });
-
-    it('explicit density overrides the divider default', () => {
-      const {container} = render(
-        <CollapsibleGroup dividers="between" density="spacious">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      const wrapper = container.querySelector('.astryx-collapsible-group');
-      expect(wrapper).toHaveAttribute('data-density', 'spacious');
-      expect(getItem(/Item A/)).toHaveAttribute('data-density', 'spacious');
-    });
-
-    it('tolerates interleaved non-Collapsible children', async () => {
-      const user = userEvent.setup();
-      render(
-        <CollapsibleGroup type="single" dividers="between" defaultValue="a">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-          <hr data-testid="separator" />
-          <Collapsible trigger="Item B" value="b">
-            <p>Content B</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      expect(screen.getByTestId('separator')).toBeInTheDocument();
-      expect(getItem(/Item A/)).toHaveAttribute('data-dividers', 'between');
-      expect(getItem(/Item B/)).toHaveAttribute('data-dividers', 'between');
-      await user.click(screen.getByRole('button', {name: /Item B/}));
-      expect(screen.getByText('Content A')).not.toBeVisible();
-      expect(screen.getByText('Content B')).toBeVisible();
-    });
-
-    it('lets a nested group define its own chrome instead of inheriting', () => {
-      render(
-        <CollapsibleGroup dividers="between" defaultValue="outer">
-          <Collapsible trigger="Outer" value="outer">
-            <CollapsibleGroup type="multiple" dividers="all">
-              <Collapsible trigger="Inner divided" value="in-a">
-                <p>Inner content</p>
-              </Collapsible>
-            </CollapsibleGroup>
-            <CollapsibleGroup type="multiple">
-              <Collapsible trigger="Inner plain" value="in-b">
-                <p>Inner content</p>
-              </Collapsible>
-            </CollapsibleGroup>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      expect(getItem(/Outer/)).toHaveAttribute('data-dividers', 'between');
-      expect(getItem(/Inner divided/)).toHaveAttribute('data-dividers', 'all');
-      expect(getItem(/Inner plain/)).not.toHaveAttribute('data-dividers');
-    });
-
-    it('keeps controlled coordination and onChange shape with dividers', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      const {rerender} = render(
-        <CollapsibleGroup
-          type="single"
-          dividers="all"
-          value="a"
-          onChange={onChange}>
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-          <Collapsible trigger="Item B" value="b">
-            <p>Content B</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      await user.click(screen.getByRole('button', {name: /Item B/}));
-      expect(onChange).toHaveBeenCalledWith('b');
-      // Controlled: nothing opens until the parent passes the new value
-      expect(screen.getByText('Content B')).not.toBeVisible();
-
-      rerender(
-        <CollapsibleGroup
-          type="single"
-          dividers="all"
-          value="b"
-          onChange={onChange}>
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-          <Collapsible trigger="Item B" value="b">
-            <p>Content B</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      expect(screen.getByText('Content A')).not.toBeVisible();
-      expect(screen.getByText('Content B')).toBeVisible();
-    });
-
-    it('renders standalone Collapsible without any group chrome', () => {
-      render(
-        <Collapsible trigger="Alone">
-          <p>Standalone content</p>
-        </Collapsible>,
-      );
-
-      const item = getItem(/Alone/);
-      expect(item).not.toHaveAttribute('data-dividers');
-      expect(item).not.toHaveAttribute('data-density');
-      expect(item.querySelector('.astryx-collapsible-group')).toBeNull();
-    });
-  });
 });