@proyecto-viviana/solidaria-components 0.2.2 → 0.2.3

package/src/Dialog.tsx

@@ -0,0 +1,262 @@
+/**
+ * Dialog component for solidaria-components
+ *
+ * A headless dialog component that combines ARIA hooks.
+ * Port of react-aria-components Dialog.
+ */
+
+import {
+  type JSX,
+  createContext,
+  createMemo,
+  createUniqueId,
+  splitProps,
+  useContext,
+  Switch,
+  Match,
+} from 'solid-js'
+import {
+  createDialog,
+  createOverlayTrigger,
+  type AriaDialogProps,
+} from '@proyecto-viviana/solidaria'
+import { createOverlayTriggerState } from '@proyecto-viviana/solid-stately'
+import { DialogTriggerContext, useOverlayTriggerState } from './contexts'
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils'
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface DialogRenderProps {
+  /** Function to close the dialog */
+  close: () => void
+}
+
+export interface DialogProps extends Omit<AriaDialogProps, 'class' | 'style'>, SlotProps {
+  /** The children of the component - can be JSX or render function. */
+  children?: RenderChildren<DialogRenderProps>
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<DialogRenderProps>
+  /** The inline style for the element. */
+  style?: StyleOrFunction<DialogRenderProps>
+  /** Callback when dialog should close */
+  onClose?: () => void
+}
+
+export interface DialogTriggerProps {
+  /** The children - should include a trigger and modal/popover content. */
+  children: JSX.Element
+  /** Whether the dialog is open (controlled). */
+  isOpen?: boolean
+  /** Whether the dialog is open by default (uncontrolled). */
+  defaultOpen?: boolean
+  /** Callback when open state changes. */
+  onOpenChange?: (isOpen: boolean) => void
+}
+
+// ============================================
+// CONTEXTS
+// ============================================
+
+interface DialogContextValue {
+  close: () => void
+  titleId?: string
+}
+
+export const DialogContext = createContext<DialogContextValue | null>(null)
+
+// Re-export DialogTriggerContext from shared contexts (also imported above for local use)
+export { DialogTriggerContext, useDialogTrigger } from './contexts'
+
+// ============================================
+// DIALOG TRIGGER COMPONENT
+// ============================================
+
+/**
+ * A DialogTrigger opens a dialog when a trigger element is pressed.
+ * Children should include a trigger element (e.g. Button) and the dialog content.
+ */
+export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
+  const [local] = splitProps(props, ['isOpen', 'defaultOpen', 'onOpenChange'])
+
+  // Create overlay trigger state
+  const state = createOverlayTriggerState({
+    get isOpen() {
+      return local.isOpen
+    },
+    get defaultOpen() {
+      return local.defaultOpen
+    },
+    onOpenChange: local.onOpenChange,
+  })
+
+  // Ref for the trigger element
+  let triggerRef: HTMLElement | null = null
+  const triggerId = createUniqueId()
+
+  // Create overlay trigger props (used via context, not directly applied)
+  createOverlayTrigger(
+    { type: 'dialog' },
+    state,
+    () => triggerRef
+  )
+
+  // Context value - memoized to avoid unnecessary re-renders
+  const contextValue = createMemo(() => ({
+    state,
+    triggerRef: () => triggerRef,
+    triggerId,
+  }))
+
+  // In SolidJS, we simply render children directly within the provider
+  // The children will have access to the context
+  return (
+    <DialogTriggerContext.Provider value={contextValue()}>
+      {props.children}
+    </DialogTriggerContext.Provider>
+  )
+}
+
+// ============================================
+// DIALOG COMPONENT
+// ============================================
+
+/**
+ * A dialog is an overlay shown above other content in an application.
+ */
+export function Dialog(props: DialogProps): JSX.Element {
+  const [local, ariaProps, rest] = splitProps(
+    props,
+    ['class', 'style', 'slot', 'onClose'],
+    ['role', 'aria-label', 'aria-labelledby', 'aria-describedby']
+  )
+
+  let dialogRef!: HTMLDivElement
+
+  // Get trigger context for aria-labelledby fallback
+  const triggerContext = useContext(DialogTriggerContext)
+
+  // createDialog returns dialogProps AND titleProps (with the id for the Heading)
+  const { dialogProps, titleProps } = createDialog(
+    {
+      get role() {
+        return ariaProps.role
+      },
+      get 'aria-label'() {
+        return ariaProps['aria-label']
+      },
+      get 'aria-labelledby'() {
+        // Use provided labelledby, or fall back to trigger id if no title
+        return ariaProps['aria-labelledby'] ?? triggerContext?.triggerId
+      },
+      get 'aria-describedby'() {
+        return ariaProps['aria-describedby']
+      },
+    },
+    () => dialogRef
+  )
+
+  // Get titleId from titleProps - this links Dialog's aria-labelledby to Heading's id
+  const titleId = () => titleProps()?.id
+
+  // Get close function from OverlayTriggerState context or onClose prop
+  const overlayState = useOverlayTriggerState()
+
+  const close = () => {
+    local.onClose?.()
+    overlayState?.close()
+    triggerContext?.state.close()
+  }
+
+  // Render props values
+  const renderValues = createMemo<DialogRenderProps>(() => ({
+    close,
+  }))
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      children: props.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-Dialog',
+    },
+    renderValues
+  )
+
+  // Filter DOM props
+  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }))
+
+  return (
+    <DialogContext.Provider value={{ close, titleId: titleId() }}>
+      <div
+        {...dialogProps()}
+        {...domProps()}
+        ref={dialogRef}
+        class={renderProps.class()}
+        style={renderProps.style()}
+      >
+        {renderProps.renderChildren()}
+      </div>
+    </DialogContext.Provider>
+  )
+}
+
+// ============================================
+// HEADING COMPONENT
+// ============================================
+
+export interface HeadingProps {
+  /** The children of the heading. */
+  children: JSX.Element
+  /** The CSS className. */
+  class?: string
+  /** The heading level (1-6). Defaults to 2. */
+  level?: 1 | 2 | 3 | 4 | 5 | 6
+  /** The slot to render into. */
+  slot?: string
+}
+
+/**
+ * Heading element for dialog title.
+ * When rendered inside a Dialog, automatically gets the titleProps.
+ */
+export function Heading(props: HeadingProps): JSX.Element {
+  const dialogContext = useContext(DialogContext)
+  const level = () => props.level ?? 2
+  const id = () => dialogContext?.titleId
+
+  return (
+    <Switch>
+      <Match when={level() === 1}>
+        <h1 id={id()} class={props.class}>{props.children}</h1>
+      </Match>
+      <Match when={level() === 2}>
+        <h2 id={id()} class={props.class}>{props.children}</h2>
+      </Match>
+      <Match when={level() === 3}>
+        <h3 id={id()} class={props.class}>{props.children}</h3>
+      </Match>
+      <Match when={level() === 4}>
+        <h4 id={id()} class={props.class}>{props.children}</h4>
+      </Match>
+      <Match when={level() === 5}>
+        <h5 id={id()} class={props.class}>{props.children}</h5>
+      </Match>
+      <Match when={level() === 6}>
+        <h6 id={id()} class={props.class}>{props.children}</h6>
+      </Match>
+    </Switch>
+  )
+}
+
+// Keep backward compatibility
+export { Heading as DialogHeading }

package/src/Disclosure.tsx

@@ -0,0 +1,439 @@
+/**
+ * Disclosure and Accordion components for solidaria-components
+ *
+ * Disclosure is a widget that can be toggled to show or hide content.
+ * Accordion (DisclosureGroup) manages multiple disclosures with optional single-expand.
+ *
+ * Port of react-aria-components Disclosure.
+ */
+
+import {
+  type JSX,
+  createContext,
+  createMemo,
+  createSignal,
+  splitProps,
+  useContext,
+} from 'solid-js';
+import {
+  createDisclosureState,
+  createDisclosureGroupState,
+  type DisclosureState,
+  type DisclosureGroupState,
+  type DisclosureStateProps,
+  type DisclosureGroupStateProps,
+} from '@proyecto-viviana/solid-stately';
+import {
+  createDisclosure,
+  createDisclosureGroup,
+} from '@proyecto-viviana/solidaria';
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  useRenderProps,
+  filterDOMProps,
+  dataAttr,
+} from './utils';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface DisclosureRenderProps {
+  /** Whether the disclosure is expanded. */
+  isExpanded: boolean;
+  /** Whether the disclosure is disabled. */
+  isDisabled: boolean;
+}
+
+export interface DisclosureGroupRenderProps {
+  /** Whether all items are disabled. */
+  isDisabled: boolean;
+}
+
+export interface DisclosureProps extends DisclosureStateProps {
+  /** The children of the component. */
+  children?: JSX.Element;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<DisclosureRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<DisclosureRenderProps>;
+  /** Whether the disclosure is disabled. */
+  isDisabled?: boolean;
+  /** A unique identifier for the disclosure (used in groups). */
+  id?: string;
+}
+
+export interface DisclosureGroupProps extends DisclosureGroupStateProps {
+  /** The children of the component. */
+  children?: JSX.Element;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<DisclosureGroupRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<DisclosureGroupRenderProps>;
+}
+
+export interface DisclosureTriggerProps {
+  /** The children of the trigger. */
+  children?: JSX.Element;
+  /** The CSS className for the element. */
+  class?: string;
+  /** The inline style for the element. */
+  style?: JSX.CSSProperties;
+}
+
+export interface DisclosurePanelProps {
+  /** The children of the panel. */
+  children?: RenderChildren<DisclosureRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<DisclosureRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<DisclosureRenderProps>;
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+interface DisclosureContextValue {
+  state: DisclosureState;
+  isDisabled: () => boolean;
+  /** The disclosure ARIA result object - access .buttonProps and .panelProps as getters */
+  disclosureAria: {
+    readonly buttonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    readonly panelProps: JSX.HTMLAttributes<HTMLElement>;
+  };
+}
+
+export const DisclosureContext = createContext<DisclosureContextValue | null>(null);
+
+export function useDisclosureContext(): DisclosureContextValue | null {
+  return useContext(DisclosureContext);
+}
+
+interface DisclosureGroupContextValue {
+  state: DisclosureGroupState;
+}
+
+export const DisclosureGroupContext = createContext<DisclosureGroupContextValue | null>(null);
+
+export function useDisclosureGroupContext(): DisclosureGroupContextValue | null {
+  return useContext(DisclosureGroupContext);
+}
+
+// ============================================
+// DISCLOSURE GROUP (Accordion)
+// ============================================
+
+/**
+ * DisclosureGroup manages a group of Disclosure components.
+ * Use this to create an accordion where only one item can be expanded at a time.
+ *
+ * @example
+ * ```tsx
+ * <DisclosureGroup>
+ *   <Disclosure id="item1">
+ *     <DisclosureTrigger>Item 1</DisclosureTrigger>
+ *     <DisclosurePanel>Content 1</DisclosurePanel>
+ *   </Disclosure>
+ *   <Disclosure id="item2">
+ *     <DisclosureTrigger>Item 2</DisclosureTrigger>
+ *     <DisclosurePanel>Content 2</DisclosurePanel>
+ *   </Disclosure>
+ * </DisclosureGroup>
+ * ```
+ */
+export function DisclosureGroup(props: DisclosureGroupProps): JSX.Element {
+  // IMPORTANT: Don't destructure or access props.children early!
+  // In SolidJS, children are lazily evaluated. Accessing them before
+  // the context provider renders causes them to evaluate outside the context.
+  // See: https://github.com/solidjs/solid/issues/182
+  const [local, rest] = splitProps(props, [
+    'class',
+    'style',
+    'allowsMultipleExpanded',
+    'isDisabled',
+    'expandedKeys',
+    'defaultExpandedKeys',
+    'onExpandedChange',
+  ]);
+
+  // Create group state
+  const state = createDisclosureGroupState({
+    allowsMultipleExpanded: local.allowsMultipleExpanded,
+    isDisabled: local.isDisabled,
+    expandedKeys: local.expandedKeys,
+    defaultExpandedKeys: local.defaultExpandedKeys,
+    onExpandedChange: local.onExpandedChange,
+  });
+
+  // Create group accessibility props
+  const { groupProps } = createDisclosureGroup(
+    { isDisabled: local.isDisabled },
+    state
+  );
+
+  // Render props values
+  const renderValues = createMemo<DisclosureGroupRenderProps>(() => ({
+    isDisabled: state.isDisabled,
+  }));
+
+  // Resolve render props - don't pass children, we'll render props.children directly
+  const renderProps = useRenderProps(
+    {
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-DisclosureGroup',
+    },
+    renderValues
+  );
+
+  // Filter DOM props
+  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+
+  // Context value
+  const contextValue: DisclosureGroupContextValue = { state };
+
+  // Extract ref from groupProps to avoid type conflicts
+  const { ref: _ref, ...cleanGroupProps } = groupProps as Record<string, unknown>;
+
+  return (
+    <DisclosureGroupContext.Provider value={contextValue}>
+      <div
+        {...domProps()}
+        {...cleanGroupProps}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-disabled={dataAttr(state.isDisabled)}
+      >
+        {props.children}
+      </div>
+    </DisclosureGroupContext.Provider>
+  );
+}
+
+// ============================================
+// DISCLOSURE
+// ============================================
+
+/**
+ * Disclosure is a widget that can be toggled to show or hide content.
+ *
+ * @example
+ * ```tsx
+ * <Disclosure>
+ *   <DisclosureTrigger>Show more</DisclosureTrigger>
+ *   <DisclosurePanel>Hidden content here...</DisclosurePanel>
+ * </Disclosure>
+ * ```
+ */
+export function Disclosure(props: DisclosureProps): JSX.Element {
+  // IMPORTANT: Don't destructure or access props.children early!
+  // In SolidJS, children are lazily evaluated. Accessing them before
+  // the context provider renders causes them to evaluate outside the context.
+  // See: https://github.com/solidjs/solid/issues/182
+  const [local, rest] = splitProps(props, [
+    'class',
+    'style',
+    'isDisabled',
+    'isExpanded',
+    'defaultExpanded',
+    'onExpandedChange',
+    'id',
+  ]);
+
+  // Check if we're inside a DisclosureGroup
+  const groupContext = useDisclosureGroupContext();
+
+  // Create disclosure state
+  // If in a group, sync with group state
+  const state = createDisclosureState(() => {
+    const id = local.id;
+    if (groupContext && id) {
+      return {
+        isExpanded: groupContext.state.isExpanded(id),
+        onExpandedChange: (expanded: boolean) => {
+          if (expanded !== groupContext.state.isExpanded(id)) {
+            groupContext.state.toggleKey(id);
+          }
+          local.onExpandedChange?.(expanded);
+        },
+      };
+    }
+    return {
+      isExpanded: local.isExpanded,
+      defaultExpanded: local.defaultExpanded,
+      onExpandedChange: local.onExpandedChange,
+    };
+  });
+
+  // Panel ref as a signal so the createEffect in createDisclosure can track it
+  const [panelRef, setPanelRefSignal] = createSignal<HTMLElement | null>(null);
+
+  // Determine if disabled (used in multiple places)
+  const isDisabled = () => local.isDisabled || groupContext?.state.isDisabled || false;
+
+  // Create disclosure accessibility props
+  // Pass props as accessor function for reactivity
+  // IMPORTANT: Don't destructure! The getters must be called fresh each render
+  const disclosureAria = createDisclosure(
+    () => ({ isDisabled: isDisabled() }),
+    state,
+    panelRef  // Pass the accessor directly
+  );
+
+  // Render props values
+  const renderValues = createMemo<DisclosureRenderProps>(() => ({
+    isExpanded: state.isExpanded(),
+    isDisabled: isDisabled(),
+  }));
+
+  // Resolve render props - don't pass children, we'll render props.children directly
+  const renderProps = useRenderProps(
+    {
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-Disclosure',
+    },
+    renderValues
+  );
+
+  // Filter DOM props
+  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+
+  // Context value - pass the disclosureAria object with getters intact
+  const contextValue: DisclosureContextValue = {
+    state,
+    isDisabled,  // Pass the accessor function, not the value
+    disclosureAria,
+  };
+
+  // Setter for panel ref
+  const setPanelRef = (el: HTMLElement | null) => {
+    setPanelRefSignal(el);
+  };
+
+  return (
+    <DisclosureContext.Provider value={contextValue}>
+      <DisclosurePanelRefContext.Provider value={setPanelRef}>
+        <div
+          {...domProps()}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-expanded={dataAttr(state.isExpanded())}
+          data-disabled={dataAttr(isDisabled())}
+        >
+          {props.children}
+        </div>
+      </DisclosurePanelRefContext.Provider>
+    </DisclosureContext.Provider>
+  );
+}
+
+// Internal context to pass panel ref setter
+const DisclosurePanelRefContext = createContext<((el: HTMLElement | null) => void) | null>(null);
+
+// ============================================
+// DISCLOSURE TRIGGER
+// ============================================
+
+/**
+ * DisclosureTrigger is the button that toggles the disclosure.
+ * Pattern matches SelectTrigger for consistency.
+ */
+export function DisclosureTrigger(props: DisclosureTriggerProps): JSX.Element {
+  // Get context - now safe because parent uses lazy children evaluation
+  const context = useContext(DisclosureContext);
+  if (!context) {
+    throw new Error('DisclosureTrigger must be used within a Disclosure');
+  }
+
+  const { state, disclosureAria, isDisabled } = context;
+
+  // Reactive accessors
+  const isExpanded = () => state.isExpanded();
+
+  // Get buttonProps from the getter each time - this ensures reactivity
+  // IMPORTANT: Call the getter fresh each render to get updated aria-expanded, etc.
+  const getButtonProps = () => {
+    const { ref: _ref, ...rest } = disclosureAria.buttonProps as Record<string, unknown>;
+    return rest;
+  };
+
+  return (
+    <button
+      {...getButtonProps()}
+      type="button"
+      class={props.class}
+      style={props.style}
+      data-expanded={dataAttr(isExpanded())}
+      data-disabled={dataAttr(isDisabled())}
+    >
+      {props.children}
+    </button>
+  );
+}
+
+// ============================================
+// DISCLOSURE PANEL
+// ============================================
+
+/**
+ * DisclosurePanel contains the content that is shown/hidden.
+ */
+export function DisclosurePanel(props: DisclosurePanelProps): JSX.Element {
+  // Get context - now safe because parent uses lazy children evaluation
+  const context = useContext(DisclosureContext);
+  const panelRefSetter = useContext(DisclosurePanelRefContext);
+
+  const [local, rest] = splitProps(props, ['class', 'style']);
+
+  // Reactive accessors
+  const isExpanded = () => context?.state.isExpanded() ?? false;
+  const isDisabled = () => context?.isDisabled() ?? false;
+
+  // Render props values
+  const renderValues = createMemo<DisclosureRenderProps>(() => ({
+    isExpanded: isExpanded(),
+    isDisabled: isDisabled(),
+  }));
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      children: props.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-DisclosurePanel',
+    },
+    renderValues
+  );
+
+  // Filter DOM props
+  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+
+  // Get panelProps from the getter each time - this ensures reactivity
+  // IMPORTANT: Call the getter fresh each render to get updated hidden attribute, etc.
+  const getPanelProps = () => {
+    if (!context) return { id: undefined, role: 'region', 'aria-labelledby': undefined, hidden: true };
+    const { ref: _ref, ...rest } = context.disclosureAria.panelProps as Record<string, unknown>;
+    return rest;
+  };
+
+  return (
+    <div
+      {...domProps()}
+      {...getPanelProps()}
+      ref={(el) => panelRefSetter?.(el)}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      data-expanded={dataAttr(isExpanded())}
+    >
+      {renderProps.renderChildren()}
+    </div>
+  );
+}
+
+// Re-export state types for convenience
+export type { DisclosureState, DisclosureGroupState };