@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/ToggleButtonGroup.tsx

@@ -0,0 +1,136 @@
+/**
+ * ToggleButtonGroup component for solidaria-components.
+ *
+ * Groups toggle buttons with single/multiple selection state.
+ * Parity target: react-aria-components/src/ToggleButtonGroup.tsx
+ */
+
+import { type JSX, createContext, createMemo, splitProps, useContext } from 'solid-js';
+import {
+  createToggleButtonGroup,
+  mergeProps,
+} from '@proyecto-viviana/solidaria';
+import {
+  createToggleGroupState,
+  type Key,
+  type ToggleGroupState,
+} from '@proyecto-viviana/solid-stately';
+import {
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type RenderChildren,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+
+export interface ToggleButtonGroupRenderProps {
+  orientation: 'horizontal' | 'vertical';
+  isDisabled: boolean;
+  state: ToggleGroupState;
+}
+
+export interface ToggleButtonGroupProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style' | 'onSelectionChange'>,
+    SlotProps {
+  selectionMode?: 'single' | 'multiple';
+  disallowEmptySelection?: boolean;
+  selectedKeys?: Iterable<Key>;
+  defaultSelectedKeys?: Iterable<Key>;
+  onSelectionChange?: (keys: Set<Key>) => void;
+  orientation?: 'horizontal' | 'vertical';
+  isDisabled?: boolean;
+  children?: RenderChildren<ToggleButtonGroupRenderProps>;
+  class?: ClassNameOrFunction<ToggleButtonGroupRenderProps>;
+  style?: StyleOrFunction<ToggleButtonGroupRenderProps>;
+}
+
+export const ToggleButtonGroupContext = createContext<ToggleButtonGroupProps | null>(null);
+export const ToggleButtonGroupStateContext = createContext<ToggleGroupState | null>(null);
+export const ToggleGroupStateContext = ToggleButtonGroupStateContext;
+export type ToggleButtonGroupStateContextValue = ToggleGroupState;
+
+export function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element {
+  const [local, domProps] = splitProps(props, [
+    'selectionMode',
+    'disallowEmptySelection',
+    'selectedKeys',
+    'defaultSelectedKeys',
+    'onSelectionChange',
+    'orientation',
+    'isDisabled',
+    'children',
+    'class',
+    'style',
+    'slot',
+    'aria-label',
+    'aria-labelledby',
+  ]);
+
+  const state = createToggleGroupState(() => ({
+    selectionMode: local.selectionMode,
+    disallowEmptySelection: local.disallowEmptySelection,
+    selectedKeys: local.selectedKeys,
+    defaultSelectedKeys: local.defaultSelectedKeys,
+    onSelectionChange: local.onSelectionChange,
+    isDisabled: !!local.isDisabled,
+  }));
+
+  const { groupProps } = createToggleButtonGroup(
+    {
+      get orientation() {
+        return local.orientation;
+      },
+      get isDisabled() {
+        return !!local.isDisabled;
+      },
+      get 'aria-label'() {
+        return local['aria-label'];
+      },
+      get 'aria-labelledby'() {
+        return local['aria-labelledby'];
+      },
+    },
+    state
+  );
+
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-ToggleButtonGroup',
+    },
+    () => ({
+      orientation: local.orientation ?? 'horizontal',
+      isDisabled: !!local.isDisabled,
+      state,
+    })
+  );
+
+  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+  const mergedGroupProps = createMemo(() =>
+    mergeProps(filteredDomProps(), groupProps as Record<string, unknown>)
+  );
+
+  return (
+    <div
+      {...(mergedGroupProps() as JSX.HTMLAttributes<HTMLDivElement>)}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      slot={local.slot}
+      data-orientation={local.orientation ?? 'horizontal'}
+      data-disabled={local.isDisabled || undefined}
+    >
+      <ToggleButtonGroupContext.Provider value={props}>
+        <ToggleButtonGroupStateContext.Provider value={state}>
+          {renderProps.renderChildren()}
+        </ToggleButtonGroupStateContext.Provider>
+      </ToggleButtonGroupContext.Provider>
+    </div>
+  );
+}
+
+export function useToggleButtonGroupStateContext(): ToggleGroupState | null {
+  return useContext(ToggleButtonGroupStateContext);
+}

package/src/Toolbar.tsx

@@ -100,15 +100,21 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
     return {}
   }
 
-  // Merge slot props with explicit props
-  const mergedAriaProps = createMemo(() => ({
-    orientation: ariaProps.orientation,
-    'aria-label': ariaProps['aria-label'] ?? slotProps()['aria-label'] as string | undefined,
-    'aria-labelledby': ariaProps['aria-labelledby'],
-  }))
-
   // Create toolbar aria props
-  const { toolbarProps, orientation } = createToolbar(mergedAriaProps())
+  const { toolbarProps, orientation } = createToolbar({
+    get orientation() {
+      return ariaProps.orientation
+    },
+    get 'aria-label'() {
+      return (
+        (ariaProps['aria-label'] as string | undefined) ??
+        (slotProps()['aria-label'] as string | undefined)
+      )
+    },
+    get 'aria-labelledby'() {
+      return ariaProps['aria-labelledby'] as string | undefined
+    },
+  })
 
   // Render props values
   const renderValues = createMemo<ToolbarRenderProps>(() => ({

package/src/Tooltip.tsx

@@ -83,6 +83,8 @@ interface TooltipTriggerContextValue {
 }
 
 const TooltipTriggerContext = createContext<TooltipTriggerContextValue | null>(null);
+export const TooltipContext = TooltipTriggerContext;
+export const TooltipTriggerStateContext = createContext<TooltipTriggerState | null>(null);
 
 // ============================================
 // COMPONENTS
@@ -150,9 +152,11 @@ export const TooltipTrigger: ParentComponent<TooltipTriggerComponentProps> = (pr
   };
 
   return (
-    <TooltipTriggerContext.Provider value={context}>
-      {processChildren()}
-    </TooltipTriggerContext.Provider>
+    <TooltipTriggerStateContext.Provider value={state}>
+      <TooltipTriggerContext.Provider value={context}>
+        {processChildren()}
+      </TooltipTriggerContext.Provider>
+    </TooltipTriggerStateContext.Provider>
   );
 };
 
@@ -242,17 +246,60 @@ export function Tooltip(props: TooltipProps): JSX.Element {
   const state = () => context?.state ?? localState;
   const placement = () => props.placement ?? 'top';
 
-  // Only render when open
   const isOpen = () => state().isOpen();
 
+  // Exit animation state machine: 'closed' | 'open' | 'exiting'
+  // Keeps the tooltip mounted during exit animation so CSS transitions can play.
+  const [exitState, setExitState] = createSignal<'closed' | 'open' | 'exiting'>(
+    isOpen() ? 'open' : 'closed'
+  );
+
+  createEffect(() => {
+    const open = isOpen();
+    const current = exitState();
+    if (current === 'open' && !open) {
+      setExitState('exiting');
+    } else if ((current === 'closed' || current === 'exiting') && open) {
+      setExitState('open');
+    }
+  });
+
+  // Signal for the tooltip ref so we can observe exit animations
+  const [tooltipEl, setTooltipEl] = createSignal<HTMLDivElement | null>(null);
+
+  // When exiting, wait for CSS animations to finish, then set state to closed
+  createEffect(() => {
+    if (exitState() !== 'exiting') return;
+    const el = tooltipEl();
+    if (!el || !('getAnimations' in el)) {
+      setExitState('closed');
+      return;
+    }
+    const animations = el.getAnimations();
+    if (animations.length === 0) {
+      setExitState('closed');
+      return;
+    }
+    let canceled = false;
+    Promise.all(animations.map((a) => a.finished))
+      .then(() => { if (!canceled) setExitState((s) => s === 'exiting' ? 'closed' : s); })
+      .catch(() => { if (!canceled) setExitState((s) => s === 'exiting' ? 'closed' : s); });
+    onCleanup(() => { canceled = true; });
+  });
+
+  const shouldRender = () => isOpen() || exitState() === 'exiting';
+  const isExiting = () => exitState() === 'exiting';
+
   return (
-    <Show when={isOpen()}>
+    <Show when={shouldRender()}>
       <TooltipContent
         {...props}
         state={state()}
         contextTooltipProps={context?.tooltipProps ?? {}}
         placement={placement()}
         triggerRef={context?.triggerRef ?? (() => null)}
+        isExiting={isExiting()}
+        onTooltipRef={setTooltipEl}
       />
     </Show>
   );
@@ -267,6 +314,8 @@ function TooltipContent(
     contextTooltipProps: { id?: string };
     placement: 'top' | 'bottom' | 'left' | 'right';
     triggerRef: () => HTMLElement | null | undefined;
+    isExiting: boolean;
+    onTooltipRef: (el: HTMLDivElement | null) => void;
   }
 ): JSX.Element {
   if (isServer) {
@@ -286,9 +335,38 @@ function TooltipContent(
     visibility: 'visible' as 'hidden' | 'visible',
   });
 
+  // Enter animation state: starts true on mount, clears after first animation frame.
+  // Uses getAnimations() to detect CSS animations/transitions - if none exist (JSDOM,
+  // no CSS defined, reduced-motion), clears immediately.
+  const [isEntering, setIsEntering] = createSignal(true);
+
+  createEffect(() => {
+    if (!isEntering()) return;
+    if (!tooltipRef || !('getAnimations' in tooltipRef)) {
+      setIsEntering(false);
+      return;
+    }
+    // Cancel any premature CSS transitions triggered before layout
+    for (const anim of tooltipRef.getAnimations()) {
+      if (anim instanceof CSSTransition) {
+        anim.cancel();
+      }
+    }
+    const animations = tooltipRef.getAnimations();
+    if (animations.length === 0) {
+      setIsEntering(false);
+      return;
+    }
+    let canceled = false;
+    Promise.all(animations.map((a) => a.finished))
+      .then(() => { if (!canceled) setIsEntering(false); })
+      .catch(() => { if (!canceled) setIsEntering(false); });
+    onCleanup(() => { canceled = true; });
+  });
+
   const values = createMemo<TooltipRenderProps>(() => ({
-    isEntering: false, // TODO: animation support
-    isExiting: false,
+    isEntering: isEntering(),
+    isExiting: props.isExiting,
     placement: props.placement,
   }));
 
@@ -354,37 +432,36 @@ function TooltipContent(
     return true;
   };
 
-  // Set up positioning effect - runs when trigger ref is available
+  // Set up positioning effect - runs when trigger ref is available.
+  // Tracks pending rAF/setTimeout IDs so they can be canceled on cleanup.
   createEffect(() => {
     const trigger = props.triggerRef();
     if (!trigger) return;
 
-    // Initial position calculation - use requestAnimationFrame to ensure
-    // the element is rendered and has proper dimensions
-    // We may need multiple frames if the trigger ref hasn't resolved yet
     let retryCount = 0;
     const maxRetries = 5;
+    let pendingRaf = 0;
+    let pendingTimeout = 0;
 
     const tryUpdatePosition = () => {
+      pendingRaf = 0;
+      pendingTimeout = 0;
       const success = updatePosition();
       if (!success && retryCount < maxRetries) {
         retryCount++;
-        // In JSDOM, requestAnimationFrame may not trigger layout properly
-        // Use setTimeout for more reliable deferral across environments
-        setTimeout(tryUpdatePosition, 16); // ~60fps
+        pendingTimeout = window.setTimeout(tryUpdatePosition, 16);
       }
-      // If all retries fail, tooltip stays at 0,0 (test environments)
-      // The tooltip is visible by default, so it remains accessible
     };
 
-    // Initial attempt - use rAF for real browsers, then fall back to timeout retries
-    requestAnimationFrame(tryUpdatePosition);
+    pendingRaf = requestAnimationFrame(tryUpdatePosition);
 
     // Update on scroll/resize
     window.addEventListener('scroll', updatePosition, true);
     window.addEventListener('resize', updatePosition);
 
     onCleanup(() => {
+      if (pendingRaf) cancelAnimationFrame(pendingRaf);
+      if (pendingTimeout) clearTimeout(pendingTimeout);
       window.removeEventListener('scroll', updatePosition, true);
       window.removeEventListener('resize', updatePosition);
     });
@@ -396,6 +473,16 @@ function TooltipContent(
   // Extract ref from ariaTooltipProps to avoid type conflicts (SolidJS ref types are element-specific)
   const { ref: _ariaRef, ...cleanAriaProps } = ariaTooltipProps as Record<string, unknown>;
 
+  const setRef = (el: HTMLDivElement) => {
+    tooltipRef = el;
+    props.onTooltipRef(el);
+  };
+
+  // Clean up ref on unmount
+  onCleanup(() => {
+    props.onTooltipRef(null);
+  });
+
   return (
     <OverlayContainer>
       <div
@@ -403,7 +490,7 @@ function TooltipContent(
         {...props.contextTooltipProps}
         {...cleanAriaProps}
         role="tooltip"
-        ref={tooltipRef}
+        ref={setRef}
         class={renderProps.class()}
         style={{
           position: 'fixed',
@@ -412,6 +499,8 @@ function TooltipContent(
           ...renderProps.style(),
         }}
         data-placement={props.placement}
+        data-entering={isEntering() || undefined}
+        data-exiting={props.isExiting || undefined}
       >
         {renderProps.renderChildren()}
       </div>