@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/Collapsible/CollapsibleGroup.tsx

@@ -4,18 +4,13 @@
 
 /**
  * @file CollapsibleGroup.tsx
- * @input Uses React useState, useCallback, CollapsibleGroupContext, StyleX, theme tokens
+ * @input Uses React useState, useCallback, CollapsibleGroupContext
  * @output Exports CollapsibleGroup component and CollapsibleGroupProps
- * @position Core collapsible group coordination provider — renders no wrapper
- *   DOM unless `dividers` is enabled
+ * @position Core collapsible group coordination provider — renders no wrapper DOM
  *
  * CollapsibleGroup groups collapsible components (Card, etc.) with
- * coordinated open/close behavior. By default it renders only `{children}` —
- * no wrapper DOM element. When `dividers` is 'between' or 'all' it renders a
- * wrapper div that anchors the divider chrome (outer borders, reliable
- * :first-child suppression) and provides dividers/density to items via
- * CollapsibleGroupPresentationContext — each Collapsible draws its own
- * borders since StyleX has no child selectors.
+ * coordinated open/close behavior. It renders only `{children}` — no wrapper
+ * DOM element.
  *
  * In "single" mode (default), only one item can be open at a time.
  * In "multiple" mode, any number of items can be open simultaneously.
@@ -29,35 +24,10 @@
  */
 
 import React, {useCallback, useMemo, useState, type ReactNode} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {borderVars, colorVars} from '../theme/tokens.stylex';
-import {
-  CollapsibleGroupContext,
-  CollapsibleGroupPresentationContext,
-} from './CollapsibleGroupContext';
-import type {
-  CollapsibleGroupContextValue,
-  CollapsibleGroupDensity,
-  CollapsibleGroupDividers,
-  CollapsibleGroupPresentationValue,
-} from './CollapsibleGroupContext';
-import {mergeProps} from '../utils';
-import {themeProps} from '../utils/themeProps';
+import {CollapsibleGroupContext} from './CollapsibleGroupContext';
+import type {CollapsibleGroupContextValue} from './CollapsibleGroupContext';
 import type {BaseProps} from '../BaseProps';
 
-const styles = stylex.create({
-  // 'all' draws the group's outer top/bottom edges; between-item lines are
-  // drawn by each Collapsible (borderBlockStart, suppressed on :first-child)
-  wrapperAll: {
-    borderBlockStartWidth: borderVars['--border-width'],
-    borderBlockStartStyle: 'solid',
-    borderBlockStartColor: colorVars['--color-border'],
-    borderBlockEndWidth: borderVars['--border-width'],
-    borderBlockEndStyle: 'solid',
-    borderBlockEndColor: colorVars['--color-border'],
-  },
-});
-
 export interface CollapsibleGroupProps extends Omit<
   BaseProps<HTMLElement>,
   'onChange'
@@ -86,24 +56,6 @@ export interface CollapsibleGroupProps extends Omit<
    */
   onChange?: (value: string | string[]) => void;
 
-  /**
-   * Divider style rendered around the group's items — the accordion row
-   * chrome. 'between' draws hairlines between adjacent items; 'all' adds the
-   * group's top and bottom edges. When enabled, the group renders a wrapper
-   * div (it otherwise renders no DOM) and items get 'balanced' density unless
-   * `density` says otherwise. Pair with bare Collapsible children; Card-wrapped
-   * items provide their own separation.
-   * @default "none"
-   */
-  dividers?: CollapsibleGroupDividers;
-
-  /**
-   * 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.
-   */
-  density?: CollapsibleGroupDensity;
-
   /**
    * Children — any components that support isCollapsible + value.
    *
@@ -140,26 +92,16 @@ function normalizeToArray(value: string | string[] | undefined): string[] {
 
 /**
  * Groups collapsible components with coordinated open/close behavior.
- * Renders no wrapper DOM unless `dividers` is enabled.
+ * Renders no wrapper DOM.
  *
  * In "single" mode (default), opening one item closes the others.
  * In "multiple" mode, items toggle independently.
  *
  * @compositionHint Wrap Collapsible instances to coordinate their open/close state.
- * Each Collapsible needs a `value` prop to participate. For FAQ-style lists,
- * use `dividers` with bare Collapsible children instead of wrapping each item
- * in Card.
+ * Each Collapsible needs a `value` prop to participate.
  *
  * @example
  * ```
- * <CollapsibleGroup type="single" dividers="between" defaultValue="faq1">
- *   <Collapsible trigger="What is Astryx?" value="faq1">
- *     Astryx is a design system for building internal tools.
- *   </Collapsible>
- *   <Collapsible trigger="How do I start?" value="faq2">
- *     Install the package and import components.
- *   </Collapsible>
- * </CollapsibleGroup>
  * <CollapsibleGroup type="single" defaultValue="faq1">
  *   <VStack gap={2}>
  *     <Card>
@@ -181,14 +123,7 @@ export function CollapsibleGroup({
   defaultValue,
   value: controlledValue,
   onChange,
-  dividers = 'none',
-  density,
   children,
-  ref,
-  xstyle,
-  className,
-  style,
-  ...props
 }: CollapsibleGroupProps) {
   const isControlled = controlledValue !== undefined;
   const [internalValue, setInternalValue] = useState<string[]>(() =>
@@ -239,42 +174,9 @@ export function CollapsibleGroup({
     [isOpen, toggle],
   );
 
-  const hasDividers = dividers !== 'none';
-  const resolvedDensity = density ?? (hasDividers ? 'balanced' : null);
-
-  const presentationValue = useMemo<CollapsibleGroupPresentationValue>(
-    () => ({dividers, density: resolvedDensity}),
-    [dividers, resolvedDensity],
-  );
-
-  // The wrapper anchors divider chrome: 'all' outer borders live here, and it
-  // makes the items' :first-child suppression independent of surrounding
-  // siblings. Without dividers the group stays DOM-less (documented contract),
-  // so ref/xstyle/className/style only take effect in wrapper mode.
-  const content = hasDividers ? (
-    <div
-      ref={ref as React.Ref<HTMLDivElement>}
-      {...mergeProps(
-        themeProps('collapsible-group', {
-          dividers,
-          density: resolvedDensity ?? undefined,
-        }),
-        stylex.props(dividers === 'all' && styles.wrapperAll, xstyle),
-        className,
-        style,
-      )}
-      {...props}>
-      {children}
-    </div>
-  ) : (
-    children
-  );
-
   return (
     <CollapsibleGroupContext value={contextValue}>
-      <CollapsibleGroupPresentationContext value={presentationValue}>
-        {content}
-      </CollapsibleGroupPresentationContext>
+      {children}
     </CollapsibleGroupContext>
   );
 }

package/src/Collapsible/CollapsibleGroupContext.tsx

@@ -5,10 +5,8 @@
 /**
  * @file CollapsibleGroupContext.tsx
  * @input Uses React createContext
- * @output Exports CollapsibleGroupContext, CollapsibleGroupContextValue,
- *   CollapsibleGroupPresentationContext, CollapsibleGroupPresentationValue,
- *   CollapsibleGroupDividers, and CollapsibleGroupDensity types
- * @position Context definitions for collapsible group coordination and presentation
+ * @output Exports CollapsibleGroupContext and CollapsibleGroupContextValue type
+ * @position Context definition for collapsible group coordination
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Collapsible/CollapsibleGroup.tsx (provider)
@@ -35,41 +33,3 @@ export interface CollapsibleGroupContextValue {
 export const CollapsibleGroupContext =
   createContext<CollapsibleGroupContextValue | null>(null);
 CollapsibleGroupContext.displayName = 'CollapsibleGroupContext';
-
-/**
- * Divider style rendered around the items of a CollapsibleGroup.
- * - 'between': hairlines between adjacent items only.
- * - 'all': hairlines between items plus the group's top and bottom edges.
- * - 'none': no dividers (default).
- */
-export type CollapsibleGroupDividers = 'between' | 'all' | 'none';
-
-/**
- * Row density for the items of a CollapsibleGroup, controlling trigger and
- * content block padding. Shares the repo-wide density vocabulary
- * (Table, List, Item).
- */
-export type CollapsibleGroupDensity = 'compact' | 'balanced' | 'spacious';
-
-/**
- * Presentation value provided by CollapsibleGroup so each Collapsible can
- * draw its own group chrome (StyleX has no child selectors, so the group
- * cannot style items from the outside).
- */
-export interface CollapsibleGroupPresentationValue {
-  /** Resolved divider style for the group's items. */
-  dividers: CollapsibleGroupDividers;
-  /** Resolved row density, or null to keep the default (unpadded) look. */
-  density: CollapsibleGroupDensity | null;
-}
-
-/**
- * Context for collapsible group presentation (dividers, density).
- * Kept separate from CollapsibleGroupContext so the public useCollapsible
- * state API is unaffected. Collapsible resets this context around its
- * children so nested collapsibles never inherit row chrome.
- */
-export const CollapsibleGroupPresentationContext =
-  createContext<CollapsibleGroupPresentationValue | null>(null);
-CollapsibleGroupPresentationContext.displayName =
-  'CollapsibleGroupPresentationContext';

package/src/Collapsible/index.ts

@@ -16,10 +16,6 @@ export type {CollapsibleProps} from './Collapsible';
 
 export {CollapsibleGroup} from './CollapsibleGroup';
 export type {CollapsibleGroupProps} from './CollapsibleGroup';
-export type {
-  CollapsibleGroupDividers,
-  CollapsibleGroupDensity,
-} from './CollapsibleGroupContext';
 
 export {useCollapsible} from './useCollapsible';
 export type {

package/src/Collapsible/useCollapsible.ts

@@ -65,11 +65,8 @@ export interface UseCollapsibleReturn {
  *
  * Supports three modes:
  * 1. **Group-controlled**: When inside a CollapsibleGroup with a `value`, defers to group.
- * 2. **Controlled**: When `isOpen` is provided in config, the parent owns state;
- *    `toggle` only calls `onOpenChange` and never mutates internal state.
+ * 2. **Controlled**: When `isOpen` and `onOpenChange` are provided in config.
  * 3. **Uncontrolled**: Self-managed internal state with optional `defaultIsOpen`.
- *    `onOpenChange`, if supplied, is invoked in addition to the internal update —
- *    it is a notification callback, not a signal that the component is controlled.
  *
  * @example
  * ```
@@ -114,26 +111,15 @@ export function useCollapsible(
     isOpen = internalIsOpen;
   }
 
-  // Toggle handler dispatches to the appropriate controller.
-  //
-  // Controlled vs uncontrolled is decided by whether `isOpen` was provided —
-  // mirroring how `isOpen` is derived above. `onOpenChange` is a notification
-  // callback, not a signal of control: an uncontrolled component may still want
-  // to observe changes. So in uncontrolled mode we drive internal state AND
-  // fire the callback; only in controlled mode do we defer entirely to the
-  // parent via the callback.
+  // Toggle handler dispatches to the appropriate controller
   const toggle = () => {
     if (isControlledByGroup && value != null) {
       group.toggle(value);
-      return;
+    } else if (config?.onOpenChange) {
+      config.onOpenChange(!isOpen);
+    } else {
+      setInternalIsOpen(prev => !prev);
     }
-    const next = !isOpen;
-    // Uncontrolled: internal state is the source of truth, so update it.
-    if (config?.isOpen === undefined) {
-      setInternalIsOpen(next);
-    }
-    // Always notify — for both controlled and uncontrolled usage.
-    config?.onOpenChange?.(next);
   };
 
   return {isEnabled, isOpen, toggle};

package/src/CommandPalette/CommandPalette.doc.mjs

@@ -20,10 +20,6 @@ export const docs = {
     'navigation',
   ],
   description: 'Root component. Manages open state, search, keyboard navigation, and composition slots.',
-  // Intentionally a contained isInline preview, not playground.overlay: the
-  // component stays visible on load and knobs stay live, whereas a real
-  // showModal() overlay makes the page inert — see PlaygroundConfig.overlay
-  // in docs-types.ts (#3657).
   playground: {
     defaults: {
       isOpen: true,
@@ -142,7 +138,6 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-command-palette-empty'},
       {className: 'astryx-command-palette-footer'},
       {className: 'astryx-command-palette-group'},
       {className: 'astryx-command-palette-input'},

package/src/CommandPalette/CommandPalette.tsx

@@ -438,13 +438,11 @@ export function CommandPalette<T extends SearchableItem = SearchableItem>({
   const contextValue = useMemo(
     () => ({
       // Input uses optimisticSearch — reflects keystrokes immediately.
-      // setSearch calls setOptimisticSearch inside a transition for instant
-      // feedback then triggers the async search directly (no effect indirection).
+      // setSearch calls setOptimisticSearch for instant feedback then
+      // triggers the async search directly (no effect indirection).
       search: optimisticSearch,
       setSearch: (query: string) => {
-        startTransition(() => {
-          setOptimisticSearch(query);
-        });
+        setOptimisticSearch(query);
         runSearch(query);
       },
       value,

package/src/CommandPalette/CommandPaletteEmpty.doc.mjs

@@ -16,11 +16,6 @@ export const docs = {
       required: true,
     },
   ],
-  playground: {
-    defaults: {
-      children: 'No results found. Try a different search.',
-    },
-  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteGroup.doc.mjs

@@ -27,16 +27,6 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  playground: {
-    defaults: {
-      heading: 'Navigation',
-      children: [
-        {__element: 'CommandPaletteItem', props: {value: 'home', onSelect: undefined}, children: 'Go Home'},
-        {__element: 'CommandPaletteItem', props: {value: 'settings', onSelect: undefined}, children: 'Open Settings'},
-        {__element: 'CommandPaletteItem', props: {value: 'profile', onSelect: undefined}, children: 'View Profile'},
-      ],
-    },
-  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteInput.doc.mjs

@@ -57,12 +57,6 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  playground: {
-    defaults: {
-      placeholder: 'Search commands, files, or actions...',
-      hasAutoFocus: false,
-    },
-  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteItem.doc.mjs

@@ -50,12 +50,6 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  playground: {
-    defaults: {
-      value: 'go-home',
-      children: 'Go to Dashboard',
-    },
-  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteList.doc.mjs

@@ -27,15 +27,6 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  playground: {
-    defaults: {
-      children: [
-        {__element: 'CommandPaletteItem', props: {value: 'home', onSelect: undefined}, children: 'Go Home'},
-        {__element: 'CommandPaletteItem', props: {value: 'settings', onSelect: undefined}, children: 'Open Settings'},
-        {__element: 'CommandPaletteItem', props: {value: 'profile', onSelect: undefined}, children: 'View Profile'},
-      ],
-    },
-  },
 };
 
 export const docsZh = {

package/src/ContextMenu/ContextMenu.doc.mjs

@@ -78,21 +78,6 @@ export const docs = {
       { guidance: false, description: 'Place more than 10–12 items in a single menu without grouping them into sections.' },
     ],
   },
-  playground: {
-    defaults: {
-      children: {
-        __element: 'Card',
-        props: {padding: 6},
-        children: {__element: 'Text', props: {color: 'secondary'}, children: 'Right-click this area'},
-      },
-      items: [
-        {label: 'Edit'},
-        {label: 'Duplicate'},
-        {type: 'divider'},
-        {label: 'Delete'},
-      ],
-    },
-  },
 };
 
 /** @type {import('../docs-types').TranslationDoc} */

package/src/ContextMenu/ContextMenu.test.tsx

@@ -172,21 +172,6 @@ describe('ContextMenu', () => {
     expect(preventDefault).toHaveBeenCalled();
   });
 
-  it('prevents default context menu on the opened menu container', () => {
-    render(
-      <ContextMenu items={[{label: 'Item 1'}]}>
-        <div>Right-click me</div>
-      </ContextMenu>,
-    );
-
-    fireEvent.contextMenu(screen.getByText('Right-click me'));
-    const menu = screen.getByRole('menu', {hidden: true});
-    const event = new MouseEvent('contextmenu', {bubbles: true});
-    const preventDefault = vi.spyOn(event, 'preventDefault');
-    menu.dispatchEvent(event);
-    expect(preventDefault).toHaveBeenCalled();
-  });
-
   it('does not open when isDisabled is true', () => {
     render(
       <ContextMenu items={[{label: 'Item 1'}]} isDisabled>
@@ -464,76 +449,4 @@ describe('ContextMenu compound mode', () => {
     ).toBeInTheDocument();
     expect(screen.getByRole('separator', {hidden: true})).toBeInTheDocument();
   });
-
-  describe('cursor anchor positioning (#3465)', () => {
-    // The menu is anchored to a zero-size element placed at the cursor point
-    // *inside the trigger*, so it is positioned relative to the trigger's
-    // context (scroll-follow + auto-flip) rather than the viewport.
-    function getCursorAnchor(trigger: HTMLElement): HTMLElement {
-      const anchor = trigger.querySelector<HTMLElement>('[aria-hidden="true"]');
-      if (!anchor) {
-        throw new Error('cursor anchor not found');
-      }
-      return anchor;
-    }
-
-    it('renders a zero-size cursor anchor inside the trigger', () => {
-      render(
-        <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
-          <div>Right-click me</div>
-        </ContextMenu>,
-      );
-      const anchor = getCursorAnchor(screen.getByTestId('ctx'));
-      expect(anchor.tagName).toBe('SPAN');
-      // Carries an anchor-name so the menu can be anchored to it via CSS
-      // anchor positioning (context mode), not fixed viewport coordinates.
-      expect(anchor.style.anchorName).toMatch(/^--astryx-layer-/);
-    });
-
-    it('places the cursor anchor at the pointer position relative to the trigger', () => {
-      render(
-        <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
-          <div>Right-click me</div>
-        </ContextMenu>,
-      );
-      const trigger = screen.getByTestId('ctx');
-      trigger.getBoundingClientRect = () =>
-        ({
-          left: 100,
-          top: 50,
-          right: 300,
-          bottom: 150,
-          width: 200,
-          height: 100,
-        }) as DOMRect;
-      // Pointer at viewport (170, 90) -> local trigger offset (70, 40).
-      fireEvent.contextMenu(trigger, {clientX: 170, clientY: 90, detail: 1});
-      const anchor = getCursorAnchor(trigger);
-      expect(anchor.style.left).toBe('70px');
-      expect(anchor.style.top).toBe('40px');
-    });
-
-    it('anchors a keyboard-invoked menu to the trigger bottom-left', () => {
-      render(
-        <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
-          <div>Right-click me</div>
-        </ContextMenu>,
-      );
-      const trigger = screen.getByTestId('ctx');
-      trigger.getBoundingClientRect = () =>
-        ({
-          left: 40,
-          top: 10,
-          right: 100,
-          bottom: 30,
-          width: 60,
-          height: 20,
-        }) as DOMRect;
-      // Keyboard-initiated contextmenu: coords (0,0), detail 0 -> local (0, height).
-      fireEvent.contextMenu(trigger, {clientX: 0, clientY: 0, detail: 0});
-      const anchor = getCursorAnchor(trigger);
-      expect(anchor.style.left).toBe('0px');
-      expect(anchor.style.top).toBe('20px');
-    });
-  });
 });