@proyecto-viviana/solidaria-components 0.2.9 → 0.3.1

package/src/ToggleButton.tsx

@@ -5,13 +5,7 @@
  * Port direction: react-aria-components/src/ToggleButton.tsx
  */
 
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  splitProps,
-  useContext,
-} from 'solid-js';
+import { type JSX, createContext, createMemo, splitProps, useContext } from "solid-js";
 import {
   createToggleButton,
   createToggleButtonGroupItem,
@@ -19,8 +13,8 @@ import {
   createHover,
   mergeProps,
   type AriaToggleButtonProps,
-} from '@proyecto-viviana/solidaria';
-import type { Key } from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solidaria";
+import type { Key } from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -28,8 +22,19 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
-import { useToggleButtonGroupStateContext } from './ToggleButtonGroup';
+} from "./utils";
+import { useToggleButtonGroupStateContext } from "./ToggleButtonGroup";
+
+type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
+
+function assignRef<T>(ref: RefLike<T>, el: T): void {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(el);
+  } else {
+    ref.current = el;
+  }
+}
 
 export interface ToggleButtonRenderProps {
   isHovered: boolean;
@@ -40,9 +45,7 @@ export interface ToggleButtonRenderProps {
   isSelected: boolean;
 }
 
-export interface ToggleButtonProps
-  extends Omit<AriaToggleButtonProps, 'children'>,
-    SlotProps {
+export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, "children">, SlotProps {
   /** Key used when inside ToggleButtonGroup selection state. */
   toggleKey?: Key;
   /** Preferred group key prop, parity with RAC item id usage. */
@@ -50,14 +53,14 @@ export interface ToggleButtonProps
   children?: RenderChildren<ToggleButtonRenderProps>;
   class?: ClassNameOrFunction<ToggleButtonRenderProps>;
   style?: StyleOrFunction<ToggleButtonRenderProps>;
+  /** Ref for the underlying button element. */
+  ref?: RefLike<HTMLButtonElement>;
 }
 
 export const ToggleButtonContext = createContext<ToggleButtonProps | null>(null);
 
-function resolveDisabledValue(
-  isDisabled: AriaToggleButtonProps['isDisabled']
-): boolean {
-  if (typeof isDisabled === 'function') {
+function resolveDisabledValue(isDisabled: AriaToggleButtonProps["isDisabled"]): boolean {
+  if (typeof isDisabled === "function") {
     return isDisabled();
   }
   return !!isDisabled;
@@ -68,28 +71,34 @@ export function ToggleButton(props: ToggleButtonProps): JSX.Element {
   const mergedProps = (contextProps ? mergeProps(contextProps, props) : props) as ToggleButtonProps;
 
   const [local, ariaProps] = splitProps(mergedProps, [
-    'children',
-    'class',
-    'style',
-    'slot',
-    'toggleKey',
-    'id',
+    "children",
+    "class",
+    "style",
+    "ref",
+    "slot",
+    "toggleKey",
+    "id",
   ]);
   const groupState = useToggleButtonGroupStateContext();
   const groupKey = local.id ?? local.toggleKey;
+  const standaloneAriaProps = mergeProps<AriaToggleButtonProps>(ariaProps, {
+    get id() {
+      return local.id;
+    },
+  });
 
-  const toggleAria = groupState && groupKey != null
-    ? createToggleButtonGroupItem(
-      {
-        ...ariaProps,
-        id: groupKey,
-      },
-      groupState
-    )
-    : createToggleButton(ariaProps);
+  const toggleAria =
+    groupState && groupKey != null
+      ? createToggleButtonGroupItem(
+          {
+            ...ariaProps,
+            id: groupKey,
+          },
+          groupState,
+        )
+      : createToggleButton(standaloneAriaProps);
 
-  const isDisabled = () =>
-    resolveDisabledValue(ariaProps.isDisabled) || !!groupState?.isDisabled;
+  const isDisabled = () => resolveDisabledValue(ariaProps.isDisabled) || !!groupState?.isDisabled;
 
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
   const { isHovered, hoverProps } = createHover({
@@ -112,9 +121,9 @@ export function ToggleButton(props: ToggleButtonProps): JSX.Element {
       children: local.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-ToggleButton',
+      defaultClassName: "solidaria-ToggleButton",
     },
-    renderValues
+    renderValues,
   );
 
   const domProps = createMemo(() => {
@@ -145,6 +154,7 @@ export function ToggleButton(props: ToggleButtonProps): JSX.Element {
       {...cleanHoverProps()}
       class={renderProps.class()}
       style={renderProps.style()}
+      ref={(el) => assignRef(local.ref, el)}
       slot={local.slot}
       data-pressed={toggleAria.isPressed() || undefined}
       data-hovered={isHovered() || undefined}

package/src/ToggleButtonGroup.tsx

@@ -5,16 +5,13 @@
  * 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 { 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';
+} from "@proyecto-viviana/solid-stately";
 import {
   type ClassNameOrFunction,
   type StyleOrFunction,
@@ -22,23 +19,24 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
+} from "./utils";
 
 export interface ToggleButtonGroupRenderProps {
-  orientation: 'horizontal' | 'vertical';
+  orientation: "horizontal" | "vertical";
   isDisabled: boolean;
   state: ToggleGroupState;
 }
 
 export interface ToggleButtonGroupProps
-  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style' | 'onSelectionChange'>,
+  extends
+    Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "class" | "style" | "onSelectionChange">,
     SlotProps {
-  selectionMode?: 'single' | 'multiple';
+  selectionMode?: "single" | "multiple";
   disallowEmptySelection?: boolean;
   selectedKeys?: Iterable<Key>;
   defaultSelectedKeys?: Iterable<Key>;
   onSelectionChange?: (keys: Set<Key>) => void;
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: "horizontal" | "vertical";
   isDisabled?: boolean;
   children?: RenderChildren<ToggleButtonGroupRenderProps>;
   class?: ClassNameOrFunction<ToggleButtonGroupRenderProps>;
@@ -52,19 +50,20 @@ 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',
+    "selectionMode",
+    "disallowEmptySelection",
+    "selectedKeys",
+    "defaultSelectedKeys",
+    "onSelectionChange",
+    "orientation",
+    "isDisabled",
+    "children",
+    "class",
+    "style",
+    "ref",
+    "slot",
+    "aria-label",
+    "aria-labelledby",
   ]);
 
   const state = createToggleGroupState(() => ({
@@ -84,14 +83,14 @@ export function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element {
       get isDisabled() {
         return !!local.isDisabled;
       },
-      get 'aria-label'() {
-        return local['aria-label'];
+      get "aria-label"() {
+        return local["aria-label"];
       },
-      get 'aria-labelledby'() {
-        return local['aria-labelledby'];
+      get "aria-labelledby"() {
+        return local["aria-labelledby"];
       },
     },
-    state
+    state,
   );
 
   const renderProps = useRenderProps(
@@ -99,18 +98,18 @@ export function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element {
       children: local.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-ToggleButtonGroup',
+      defaultClassName: "solidaria-ToggleButtonGroup",
     },
     () => ({
-      orientation: local.orientation ?? 'horizontal',
+      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>)
+    mergeProps(filteredDomProps(), groupProps as Record<string, unknown>),
   );
 
   return (
@@ -119,8 +118,14 @@ export function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element {
       class={renderProps.class()}
       style={renderProps.style()}
       slot={local.slot}
-      data-orientation={local.orientation ?? 'horizontal'}
+      data-orientation={local.orientation ?? "horizontal"}
       data-disabled={local.isDisabled || undefined}
+      ref={(el) => {
+        if (!local.ref) return;
+        if (typeof local.ref === "function") {
+          local.ref(el);
+        }
+      }}
     >
       <ToggleButtonGroupContext.Provider value={props}>
         <ToggleButtonGroupStateContext.Provider value={state}>

package/src/Toolbar.tsx

@@ -12,53 +12,37 @@ import {
   createMemo,
   splitProps,
   useContext,
-} from 'solid-js'
+} from "solid-js";
 import {
   createToolbar,
   type AriaToolbarProps,
   type Orientation,
-} from '@proyecto-viviana/solidaria'
-import {
-  type SlotProps,
-  filterDOMProps,
-} from './utils'
-
-// ============================================
-// TYPES
-// ============================================
+} from "@proyecto-viviana/solidaria";
+import { type SlotProps, filterDOMProps } from "./utils";
 
 export interface ToolbarRenderProps {
   /** The orientation of the toolbar. */
-  orientation: Orientation
+  orientation: Orientation;
 }
 
-export interface ToolbarProps
-  extends AriaToolbarProps,
-    ParentProps,
-    SlotProps {
+export interface ToolbarProps extends AriaToolbarProps, ParentProps, SlotProps {
   /** The CSS className for the element. A function may be provided to receive render props. */
-  class?: string | ((renderProps: ToolbarRenderProps) => string)
+  class?: string | ((renderProps: ToolbarRenderProps) => string);
   /** The inline style for the element. A function may be provided to receive render props. */
-  style?: JSX.CSSProperties | ((renderProps: ToolbarRenderProps) => JSX.CSSProperties)
+  style?: JSX.CSSProperties | ((renderProps: ToolbarRenderProps) => JSX.CSSProperties);
   /** Additional data-* attributes. */
-  [key: `data-${string}`]: string | undefined
+  [key: `data-${string}`]: string | undefined;
+  /** Ref for the toolbar element. */
+  ref?: ((el: HTMLDivElement) => void) | { current?: HTMLDivElement | null };
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export interface ToolbarContextValue {
   slots?: {
-    [name: string]: Record<string, unknown>
-  }
+    [name: string]: Record<string, unknown>;
+  };
 }
 
-export const ToolbarContext = createContext<ToolbarContextValue | null>(null)
-
-// ============================================
-// TOOLBAR COMPONENT
-// ============================================
+export const ToolbarContext = createContext<ToolbarContextValue | null>(null);
 
 /**
  * A toolbar is a container for a set of interactive controls,
@@ -87,69 +71,62 @@ export const ToolbarContext = createContext<ToolbarContextValue | null>(null)
 export function Toolbar(props: ToolbarProps): JSX.Element {
   const [local, ariaProps, domProps] = splitProps(
     props,
-    ['class', 'style', 'slot', 'children'],
-    ['orientation', 'aria-label', 'aria-labelledby']
-  )
+    ["class", "style", "slot", "children", "ref"],
+    ["orientation", "aria-label", "aria-labelledby"],
+  );
 
-  // Get slot props from context if available
-  const ctx = useContext(ToolbarContext)
+  const ctx = useContext(ToolbarContext);
   const slotProps = () => {
     if (ctx?.slots && local.slot) {
-      return ctx.slots[local.slot] || {}
+      return ctx.slots[local.slot] || {};
     }
-    return {}
-  }
+    return {};
+  };
 
-  // Create toolbar aria props
   const { toolbarProps, orientation } = createToolbar({
     get orientation() {
-      return ariaProps.orientation
+      return ariaProps.orientation;
     },
-    get 'aria-label'() {
+    get "aria-label"() {
       return (
-        (ariaProps['aria-label'] as string | undefined) ??
-        (slotProps()['aria-label'] as string | undefined)
-      )
+        (ariaProps["aria-label"] as string | undefined) ??
+        (slotProps()["aria-label"] as string | undefined)
+      );
     },
-    get 'aria-labelledby'() {
-      return ariaProps['aria-labelledby'] as string | undefined
+    get "aria-labelledby"() {
+      return ariaProps["aria-labelledby"] as string | undefined;
     },
-  })
+  });
 
-  // Render props values
   const renderValues = createMemo<ToolbarRenderProps>(() => ({
     orientation: orientation(),
-  }))
+  }));
 
-  // Resolve class
   const resolvedClass = createMemo(() => {
-    const cls = local.class
-    if (typeof cls === 'function') {
-      return cls(renderValues())
+    const cls = local.class;
+    if (typeof cls === "function") {
+      return cls(renderValues());
     }
-    return cls ?? 'solidaria-Toolbar'
-  })
+    return cls ?? "solidaria-Toolbar";
+  });
 
-  // Resolve style
   const resolvedStyle = createMemo(() => {
-    const style = local.style
-    if (typeof style === 'function') {
-      return style(renderValues())
+    const style = local.style;
+    if (typeof style === "function") {
+      return style(renderValues());
     }
-    return style
-  })
+    return style;
+  });
 
-  // Resolve children (support render props)
   const resolvedChildren = createMemo(() => {
-    const children = props.children
-    if (typeof children === 'function') {
-      return (children as (props: ToolbarRenderProps) => JSX.Element)(renderValues())
+    const children = props.children;
+    if (typeof children === "function") {
+      return (children as (props: ToolbarRenderProps) => JSX.Element)(renderValues());
     }
-    return children
-  })
+    return children;
+  });
 
-  // Filter remaining DOM props
-  const filteredDOMProps = createMemo(() => filterDOMProps(domProps, { global: true }))
+  const filteredDOMProps = createMemo(() => filterDOMProps(domProps, { global: true }));
 
   return (
     <div
@@ -159,8 +136,16 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
       style={resolvedStyle()}
       slot={local.slot}
       data-orientation={orientation()}
+      ref={(el) => {
+        if (!local.ref) return;
+        if (typeof local.ref === "function") {
+          local.ref(el);
+        } else {
+          local.ref.current = el;
+        }
+      }}
     >
       {resolvedChildren()}
     </div>
-  )
+  );
 }