@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0

package/src/Focusable.tsx

@@ -5,12 +5,14 @@
  * focusable and capable of auto focus. Port of React Aria's Focusable.
  */
 
-import { type JSX, children as resolveChildren, createEffect, onCleanup, splitProps } from 'solid-js';
-import { createFocusable, type CreateFocusableProps } from '@proyecto-viviana/solidaria';
-
-// ============================================
-// TYPES
-// ============================================
+import {
+  type JSX,
+  children as resolveChildren,
+  createEffect,
+  onCleanup,
+  splitProps,
+} from "solid-js";
+import { createFocusable, type CreateFocusableProps } from "@proyecto-viviana/solidaria";
 
 export interface FocusableProps extends CreateFocusableProps {
   /** A single child element to make focusable. */
@@ -19,10 +21,6 @@ export interface FocusableProps extends CreateFocusableProps {
   ref?: HTMLElement | ((el: HTMLElement) => void);
 }
 
-// ============================================
-// COMPONENT
-// ============================================
-
 /**
  * Makes its child element focusable and capable of auto focus.
  * Applies focus and keyboard event handlers from createFocusable.
@@ -35,7 +33,7 @@ export interface FocusableProps extends CreateFocusableProps {
  * ```
  */
 export function Focusable(props: FocusableProps): JSX.Element {
-  const [local, focusableProps] = splitProps(props, ['children', 'ref']);
+  const [local, focusableProps] = splitProps(props, ["children", "ref"]);
 
   let ref!: HTMLElement;
   const { focusableProps: domProps } = createFocusable(focusableProps, () => ref);
@@ -46,8 +44,7 @@ export function Focusable(props: FocusableProps): JSX.Element {
     const child = resolved() as HTMLElement;
     if (child instanceof HTMLElement) {
       ref = child;
-      // Forward ref
-      if (typeof local.ref === 'function') {
+      if (typeof local.ref === "function") {
         local.ref(child);
       }
 
@@ -55,39 +52,39 @@ export function Focusable(props: FocusableProps): JSX.Element {
       const props = domProps;
       const listeners: Array<[string, EventListener]> = [];
       const addListener = (eventName: string, handler: unknown) => {
-        if (typeof handler === 'function') {
+        if (typeof handler === "function") {
           const listener = handler as EventListener;
           child.addEventListener(eventName, listener);
           listeners.push([eventName, listener]);
         }
       };
 
-      addListener('focus', props.onFocus);
-      addListener('blur', props.onBlur);
-      addListener('keydown', props.onKeyDown);
-      addListener('keyup', props.onKeyUp);
+      addListener("focus", props.onFocus);
+      addListener("blur", props.onBlur);
+      addListener("keydown", props.onKeyDown);
+      addListener("keyup", props.onKeyUp);
 
       // Apply non-event focusable props (e.g. tabIndex/aria/data attrs).
       // Keep explicit child tabIndex to mirror mergeProps(child.props precedence).
       for (const [key, value] of Object.entries(props)) {
-        if (key === 'ref' || (key.startsWith('on') && typeof value === 'function')) continue;
+        if (key === "ref" || (key.startsWith("on") && typeof value === "function")) continue;
 
-        if (key === 'tabIndex') {
-          if (child.hasAttribute('tabindex')) continue;
+        if (key === "tabIndex") {
+          if (child.hasAttribute("tabindex")) continue;
           if (value == null || value === false) {
-            child.removeAttribute('tabindex');
+            child.removeAttribute("tabindex");
           } else {
             child.tabIndex = Number(value);
           }
           continue;
         }
 
-        if (key.startsWith('aria-') || key.startsWith('data-') || key === 'id' || key === 'role') {
+        if (key.startsWith("aria-") || key.startsWith("data-") || key === "id" || key === "role") {
           if (child.hasAttribute(key)) continue;
           if (value == null || value === false) {
             child.removeAttribute(key);
           } else if (value === true) {
-            child.setAttribute(key, '');
+            child.setAttribute(key, "");
           } else {
             child.setAttribute(key, String(value));
           }

package/src/Form.tsx

@@ -5,12 +5,12 @@
  * Port direction: react-aria-components/src/Form.tsx
  */
 
-import { type JSX, createContext, splitProps } from 'solid-js';
+import { type JSX, createContext, splitProps } from "solid-js";
 import {
   FormValidationContext,
   type ValidationErrors,
   type ValidationBehavior,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   type ClassNameOrFunction,
   type StyleOrFunction,
@@ -18,59 +18,114 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
+} from "./utils";
+
+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 FormRenderProps {
   validationBehavior: ValidationBehavior;
 }
 
 export interface FormProps
-  extends Omit<JSX.FormHTMLAttributes<HTMLFormElement>, 'children' | 'class' | 'style'>,
+  extends
+    Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "children" | "class" | "style" | "ref">,
     SlotProps {
   /** Server-side validation errors keyed by field name. */
   validationErrors?: ValidationErrors;
   /** Validation behavior mode. */
   validationBehavior?: ValidationBehavior;
+  /** Character encodings accepted by the server. React-style alias for Solid's `accept-charset`. */
+  acceptCharset?: string;
+  /** Browser auto-capitalization hint. React-style alias for Solid's `autocapitalize`. */
+  autoCapitalize?: JSX.HTMLAttributes<HTMLFormElement>["autoCapitalize"];
+  /** Browser autocomplete behavior. React-style alias for Solid's `autocomplete`. */
+  autoComplete?: JSX.FormHTMLAttributes<HTMLFormElement>["autocomplete"];
+  /** Form encoding type. React-style alias for Solid's `enctype`. */
+  encType?: JSX.FormHTMLAttributes<HTMLFormElement>["enctype"];
   /** The children of the component. */
   children?: RenderChildren<FormRenderProps>;
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<FormRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<FormRenderProps>;
+  /** Ref for the underlying form element. */
+  ref?: RefLike<HTMLFormElement>;
 }
 
 export const FormContext = createContext<FormProps | null>(null);
 
+const formDOMPropNames = new Set([
+  "accept-charset",
+  "acceptCharset",
+  "action",
+  "autocapitalize",
+  "autoCapitalize",
+  "autocomplete",
+  "autoComplete",
+  "encoding",
+  "enctype",
+  "encType",
+  "method",
+  "name",
+  "rel",
+  "target",
+]);
+
+function filterFormDOMProps(props: object): Record<string, unknown> {
+  const filtered = filterDOMProps<Record<string, unknown>>(props, { global: true });
+
+  for (const key in props) {
+    if (Object.prototype.hasOwnProperty.call(props, key) && formDOMPropNames.has(key)) {
+      filtered[key] = (props as Record<string, unknown>)[key];
+    }
+  }
+
+  return filtered;
+}
+
 export function Form(props: FormProps): JSX.Element {
   const [local, domProps] = splitProps(props, [
-    'validationErrors',
-    'validationBehavior',
-    'children',
-    'class',
-    'style',
-    'slot',
+    "validationErrors",
+    "validationBehavior",
+    "children",
+    "class",
+    "style",
+    "ref",
+    "slot",
   ]);
 
-  const validationBehavior: ValidationBehavior = local.validationBehavior ?? 'native';
+  const validationBehavior: ValidationBehavior = local.validationBehavior ?? "native";
   const errors = local.validationErrors ?? {};
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Form',
+      defaultClassName: "solidaria-Form",
     },
     () => ({
       validationBehavior,
-    })
+    }),
   );
 
-  const filteredDomProps = filterDOMProps(domProps, { global: true });
+  const filteredDomProps = filterFormDOMProps(domProps);
 
   return (
     <form
       {...filteredDomProps}
-      noValidate={validationBehavior !== 'native'}
+      ref={(el) => assignRef(local.ref, el)}
+      noValidate={validationBehavior !== "native"}
       class={renderProps.class()}
       style={renderProps.style()}
       slot={local.slot}