@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/DropZone.tsx

@@ -0,0 +1,213 @@
+/**
+ * DropZone primitive for solidaria-components.
+ *
+ * A drop target area for drag and drop operations.
+ * Parity target: react-aria-components/src/DropZone.tsx
+ */
+
+import { type JSX, createContext, createMemo, createSignal, splitProps } from 'solid-js';
+import {
+  createDrop,
+  createFocusRing,
+  createHover,
+  readFromDataTransfer,
+  type HoverEvents,
+  type AriaDropOptions,
+} from '@proyecto-viviana/solidaria';
+import {
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type RenderChildren,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+import { VisuallyHidden } from './VisuallyHidden';
+
+export interface DropZoneRenderProps {
+  isHovered: boolean;
+  isFocused: boolean;
+  isFocusVisible: boolean;
+  isDropTarget: boolean;
+  isDisabled: boolean;
+}
+
+export interface DropZoneProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style' | 'onDrop'>,
+    Omit<AriaDropOptions, 'hasDropButton'>,
+    HoverEvents,
+    SlotProps {
+  children?: RenderChildren<DropZoneRenderProps>;
+  class?: ClassNameOrFunction<DropZoneRenderProps>;
+  style?: StyleOrFunction<DropZoneRenderProps>;
+}
+
+export const DropZoneContext = createContext<DropZoneProps | null>(null);
+const DEFAULT_DROPZONE_LABEL = 'Drop files';
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]',
+].join(',');
+
+function isFocusableElement(target: Element): boolean {
+  return target instanceof HTMLElement && target.matches(FOCUSABLE_SELECTOR);
+}
+
+/**
+ * A drop zone is an area into which one or multiple objects can be dropped.
+ */
+export function DropZone(props: DropZoneProps): JSX.Element {
+  const [local, dropProps, hoverEventProps, domProps] = splitProps(
+    props,
+    ['children', 'class', 'style', 'slot', 'aria-label', 'aria-labelledby'],
+    ['getDropOperation', 'getDropOperationForPoint', 'onDropEnter', 'onDropMove', 'onDropActivate', 'onDropExit', 'onDrop', 'isDisabled'],
+    ['onHoverStart', 'onHoverEnd', 'onHoverChange']
+  );
+
+  const [dropZoneRef, setDropZoneRef] = createSignal<HTMLDivElement | null>(null);
+  const [dropButtonRef, setDropButtonRef] = createSignal<HTMLButtonElement | null>(null);
+
+  const dropAria = createDrop(() => ({
+    getDropOperation: dropProps.getDropOperation,
+    getDropOperationForPoint: dropProps.getDropOperationForPoint,
+    onDropEnter: dropProps.onDropEnter,
+    onDropMove: dropProps.onDropMove,
+    onDropActivate: dropProps.onDropActivate,
+    onDropExit: dropProps.onDropExit,
+    onDrop: dropProps.onDrop,
+    hasDropButton: true,
+    isDisabled: dropProps.isDisabled,
+  }));
+
+  const { isHovered, hoverProps } = createHover(() => ({
+    isDisabled: dropProps.isDisabled,
+    onHoverStart: hoverEventProps.onHoverStart,
+    onHoverEnd: hoverEventProps.onHoverEnd,
+    onHoverChange: hoverEventProps.onHoverChange,
+  }));
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+
+  const renderValues = createMemo<DropZoneRenderProps>(() => ({
+    isHovered: isHovered(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDropTarget: dropAria.isDropTarget,
+    isDisabled: !!dropProps.isDisabled,
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-DropZone',
+    },
+    renderValues
+  );
+
+  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+
+  const cleanDropProps = () => {
+    const { ref: _ref, ...rest } = dropAria.dropProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref, ...rest } = hoverProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref, ...rest } = focusProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanDropButtonProps = () => {
+    const { ref: _ref, ...rest } = dropAria.dropButtonProps as Record<string, unknown>;
+    return rest;
+  };
+
+  const onRootClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (e) => {
+    const onClick = (filteredDomProps() as JSX.HTMLAttributes<HTMLDivElement>).onClick as
+      | JSX.EventHandler<HTMLDivElement, MouseEvent>
+      | undefined;
+    onClick?.(e);
+    if (e.defaultPrevented || dropProps.isDisabled) {
+      return;
+    }
+
+    const root = dropZoneRef();
+    const hiddenButton = dropButtonRef();
+    if (!root || !hiddenButton) {
+      return;
+    }
+
+    let target: Element | null = e.target instanceof Element ? e.target : root;
+    while (target && root.contains(target)) {
+      if (isFocusableElement(target)) {
+        return;
+      }
+      if (target === root) {
+        hiddenButton.focus();
+        return;
+      }
+      target = target.parentElement;
+    }
+  };
+
+  const onHiddenButtonPaste: JSX.EventHandler<HTMLButtonElement, ClipboardEvent> = (e) => {
+    if (dropProps.isDisabled || !e.clipboardData) {
+      return;
+    }
+
+    const items = readFromDataTransfer(e.clipboardData);
+    if (items.length === 0) {
+      return;
+    }
+
+    e.preventDefault();
+    dropProps.onDrop?.({
+      type: 'drop',
+      x: 0,
+      y: 0,
+      items,
+      dropOperation: 'copy',
+    });
+  };
+
+  const dropButtonAriaLabel = createMemo(
+    () => local['aria-label'] ?? (!local['aria-labelledby'] ? DEFAULT_DROPZONE_LABEL : undefined)
+  );
+
+  return (
+    <div
+      ref={setDropZoneRef}
+      {...filteredDomProps()}
+      {...cleanDropProps()}
+      {...cleanHoverProps()}
+      onClick={onRootClick}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      slot={local.slot}
+      data-hovered={isHovered() || undefined}
+      data-focused={isFocused() || undefined}
+      data-focus-visible={isFocusVisible() || undefined}
+      data-drop-target={dropAria.isDropTarget || undefined}
+      data-disabled={dropProps.isDisabled || undefined}
+    >
+      <VisuallyHidden>
+        <button
+          ref={setDropButtonRef}
+          {...cleanDropButtonProps()}
+          {...cleanFocusProps()}
+          aria-label={dropButtonAriaLabel()}
+          aria-labelledby={local['aria-labelledby']}
+          onPaste={onHiddenButtonPaste}
+        />
+      </VisuallyHidden>
+      {renderProps.renderChildren()}
+    </div>
+  );
+}

package/src/FieldError.tsx

@@ -0,0 +1,67 @@
+/**
+ * FieldError primitive for solidaria-components.
+ *
+ * Displays validation errors for a field from context or explicit validation prop.
+ * Port direction: react-aria-components/src/FieldError.tsx
+ */
+
+import { type JSX, createContext, createMemo, splitProps, useContext } from 'solid-js';
+import type { ValidationResult } from '@proyecto-viviana/solid-stately';
+import {
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type RenderChildren,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+
+export type FieldErrorRenderProps = ValidationResult;
+
+export interface FieldErrorProps
+  extends Omit<JSX.HTMLAttributes<HTMLElement>, 'children' | 'class' | 'style'>,
+    SlotProps {
+  /** Validation result. Falls back to context when omitted. */
+  validation?: ValidationResult | null;
+  /** The children of the component. */
+  children?: RenderChildren<FieldErrorRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<FieldErrorRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<FieldErrorRenderProps>;
+}
+
+export const FieldErrorContext = createContext<ValidationResult | null>(null);
+
+export function FieldError(props: FieldErrorProps): JSX.Element | null {
+  const contextValidation = useContext(FieldErrorContext);
+  const [local, domProps] = splitProps(props, ['validation', 'children', 'class', 'style', 'slot']);
+
+  const validation = createMemo<ValidationResult | null>(() => local.validation ?? contextValidation);
+  if (!validation()?.isInvalid) return null;
+
+  const renderProps = useRenderProps(
+    {
+      children: local.children ?? validation()!.validationErrors.join(' '),
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-FieldError',
+    },
+    () => validation()!
+  );
+
+  if (renderProps.renderChildren() == null) return null;
+
+  const filteredDomProps = filterDOMProps(domProps, { global: true });
+
+  return (
+    <div
+      {...filteredDomProps}
+      slot={local.slot ?? 'errorMessage'}
+      class={renderProps.class()}
+      style={renderProps.style()}
+    >
+      {renderProps.renderChildren()}
+    </div>
+  );
+}

package/src/FileTrigger.tsx

@@ -0,0 +1,83 @@
+/**
+ * FileTrigger primitive for solidaria-components.
+ *
+ * Opens the native file picker from any pressable child.
+ * Parity target: react-aria-components/src/FileTrigger.tsx
+ */
+
+import { type JSX, createSignal, splitProps } from 'solid-js';
+import { createPress, type PressEvent } from '@proyecto-viviana/solidaria';
+
+export interface FileTriggerProps
+  extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'children' | 'onSelect'> {
+  /** Mime types accepted by the file picker. */
+  acceptedFileTypes?: ReadonlyArray<string>;
+  /** Whether multiple files can be selected. */
+  allowsMultiple?: boolean;
+  /** Default camera capture mode for mobile devices. */
+  defaultCamera?: 'user' | 'environment';
+  /** Enables directory selection in supported browsers. */
+  acceptDirectory?: boolean;
+  /** Called when user selection changes. */
+  onSelect?: (files: FileList | null) => void;
+  /** Trigger content (typically a button). */
+  children?: JSX.Element;
+}
+
+/**
+ * A FileTrigger allows a user to access the file system using a custom trigger.
+ */
+export function FileTrigger(props: FileTriggerProps): JSX.Element {
+  const [local, inputProps] = splitProps(props, [
+    'acceptedFileTypes',
+    'allowsMultiple',
+    'defaultCamera',
+    'acceptDirectory',
+    'onSelect',
+    'children',
+    'disabled',
+  ]);
+
+  const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null);
+
+  const openFilePicker = () => {
+    const input = inputRef();
+    if (!input) return;
+    if (input.value) input.value = '';
+    input.click();
+  };
+
+  const { pressProps } = createPress({
+    get isDisabled() {
+      return !!local.disabled;
+    },
+    onPress: (_e: PressEvent) => {
+      openFilePicker();
+    },
+  });
+
+  const onInputChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {
+    local.onSelect?.(e.currentTarget.files);
+  };
+
+  return (
+    <>
+      <span {...pressProps}>
+        {local.children}
+      </span>
+      <input
+        {...inputProps}
+        ref={setInputRef}
+        type="file"
+        style={{ display: 'none' }}
+        accept={local.acceptedFileTypes?.join(',')}
+        multiple={local.allowsMultiple}
+        capture={local.defaultCamera}
+        disabled={local.disabled}
+        // @ts-expect-error Non-standard attribute supported by WebKit browsers.
+        webkitdirectory={local.acceptDirectory ? '' : undefined}
+        onChange={onInputChange}
+      />
+    </>
+  );
+}

package/src/Focusable.tsx

@@ -0,0 +1,106 @@
+/**
+ * Focusable component for solidaria-components
+ *
+ * A render-prop component that wraps createFocusable to make an element
+ * 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
+// ============================================
+
+export interface FocusableProps extends CreateFocusableProps {
+  /** A single child element to make focusable. */
+  children: JSX.Element;
+  /** Ref callback. */
+  ref?: HTMLElement | ((el: HTMLElement) => void);
+}
+
+// ============================================
+// COMPONENT
+// ============================================
+
+/**
+ * Makes its child element focusable and capable of auto focus.
+ * Applies focus and keyboard event handlers from createFocusable.
+ *
+ * @example
+ * ```tsx
+ * <Focusable onFocus={() => console.log('focused')}>
+ *   <div tabIndex={0}>Focusable content</div>
+ * </Focusable>
+ * ```
+ */
+export function Focusable(props: FocusableProps): JSX.Element {
+  const [local, focusableProps] = splitProps(props, ['children', 'ref']);
+
+  let ref!: HTMLElement;
+  const { focusableProps: domProps } = createFocusable(focusableProps, () => ref);
+
+  const resolved = resolveChildren(() => local.children);
+
+  createEffect(() => {
+    const child = resolved() as HTMLElement;
+    if (child instanceof HTMLElement) {
+      ref = child;
+      // Forward ref
+      if (typeof local.ref === 'function') {
+        local.ref(child);
+      }
+
+      // Apply focusable props to the child element
+      const props = domProps;
+      const listeners: Array<[string, EventListener]> = [];
+      const addListener = (eventName: string, handler: unknown) => {
+        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);
+
+      // 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 === 'tabIndex') {
+          if (child.hasAttribute('tabindex')) continue;
+          if (value == null || value === false) {
+            child.removeAttribute('tabindex');
+          } else {
+            child.tabIndex = Number(value);
+          }
+          continue;
+        }
+
+        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, '');
+          } else {
+            child.setAttribute(key, String(value));
+          }
+        }
+      }
+
+      onCleanup(() => {
+        for (const [eventName, listener] of listeners) {
+          child.removeEventListener(eventName, listener);
+        }
+      });
+    }
+  });
+
+  return <>{resolved()}</>;
+}

package/src/Form.tsx

@@ -0,0 +1,85 @@
+/**
+ * Form primitive for solidaria-components.
+ *
+ * Provides form-level validation behavior and server validation context.
+ * Port direction: react-aria-components/src/Form.tsx
+ */
+
+import { type JSX, createContext, splitProps } from 'solid-js';
+import {
+  FormValidationContext,
+  type ValidationErrors,
+  type ValidationBehavior,
+} from '@proyecto-viviana/solid-stately';
+import {
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type RenderChildren,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+
+export interface FormRenderProps {
+  validationBehavior: ValidationBehavior;
+}
+
+export interface FormProps
+  extends Omit<JSX.FormHTMLAttributes<HTMLFormElement>, 'children' | 'class' | 'style'>,
+    SlotProps {
+  /** Server-side validation errors keyed by field name. */
+  validationErrors?: ValidationErrors;
+  /** Validation behavior mode. */
+  validationBehavior?: ValidationBehavior;
+  /** 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>;
+}
+
+export const FormContext = createContext<FormProps | null>(null);
+
+export function Form(props: FormProps): JSX.Element {
+  const [local, domProps] = splitProps(props, [
+    'validationErrors',
+    'validationBehavior',
+    'children',
+    'class',
+    'style',
+    'slot',
+  ]);
+
+  const validationBehavior: ValidationBehavior = local.validationBehavior ?? 'native';
+  const errors = local.validationErrors ?? {};
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-Form',
+    },
+    () => ({
+      validationBehavior,
+    })
+  );
+
+  const filteredDomProps = filterDOMProps(domProps, { global: true });
+
+  return (
+    <form
+      {...filteredDomProps}
+      noValidate={validationBehavior !== 'native'}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      slot={local.slot}
+    >
+      <FormContext.Provider value={{ ...props, validationBehavior }}>
+        <FormValidationContext.Provider value={errors}>
+          {renderProps.renderChildren()}
+        </FormValidationContext.Provider>
+      </FormContext.Provider>
+    </form>
+  );
+}