@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/src/select/createHiddenSelect.tsx

@@ -1,12 +1,29 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/select/HiddenSelect.tsx
+
 /**
  * Provides a hidden native select element for form integration.
- * Based on @react-aria/select useHiddenSelect.
+ * Ported from packages/react-aria/src/select/HiddenSelect.tsx.
  */
 
-import { type JSX, type Accessor, For, createEffect, onCleanup } from "solid-js";
+import { For, Show, createRenderEffect, createSignal, createTrackedEffect } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { access, type MaybeAccessor } from "../utils/reactivity";
 import { createFormValidation } from "../form/createFormValidation";
-import type { SelectState, Key, FormValidationState } from "@proyecto-viviana/solid-stately";
+import { visuallyHiddenStyles } from "../visually-hidden/createVisuallyHidden";
+import type { SelectState, Key } from "@proyecto-viviana/solid-stately";
 
 export type ValidationBehavior = "aria" | "native";
 
@@ -27,8 +44,6 @@ export interface AriaHiddenSelectProps<T> {
   validationBehavior?: ValidationBehavior;
   /** A ref to the trigger element for focus on validation error. */
   triggerRef?: Accessor<HTMLElement | null>;
-  /** Form validation state (optional, for native validation). */
-  validationState?: FormValidationState;
 }
 
 export interface HiddenSelectAria {
@@ -49,15 +64,74 @@ export function createHiddenSelect<T>(
 ): HiddenSelectAria {
   const getProps = () => access(props);
 
-  // Track the select element for form reset/validation
-  let selectRef: HTMLSelectElement | undefined;
+  // Track the select element for form reset/validation and for writing the
+  // RAC-controlled `value` after options exist (HTML ignores <select value>
+  // assigned before its <option>s).
+  const [selectEl, setSelectEl] = createSignal<HTMLSelectElement | undefined>();
+
+  const assignSelectRef = (el: HTMLSelectElement | undefined) => {
+    setSelectEl(el);
+  };
+
+  createFormValidation(
+    {
+      get validationBehavior() {
+        return getProps().validationBehavior ?? "native";
+      },
+      focus: () => getProps().triggerRef?.()?.focus(),
+    },
+    getProps().state,
+    () => selectEl(),
+  );
+
+  const nativeSelectValue = (): string | string[] => {
+    const p = getProps();
+    const state = p.state;
+    const selectedKey = state.selectedKey();
+    const isMultiple =
+      typeof state.selectionMode === "function" && state.selectionMode() === "multiple";
+    if (isMultiple) {
+      const selectedKeys =
+        typeof state.selectedKeys === "function"
+          ? state.selectedKeys()
+          : selectedKey != null
+            ? new Set([selectedKey])
+            : new Set<Key>();
+      if (selectedKeys === "all") {
+        return Array.from(state.collection()).map((item) => String(item.key));
+      }
+      return Array.from(selectedKeys).map(String);
+    }
+    return selectedKey != null ? String(selectedKey) : "";
+  };
+
+  // RAC HiddenSelect.tsx:144 — `value: state.value`. React applies that after
+  // the option children commit; Solid has to write the DOM property once the
+  // <option>s exist, or the native select stays on the empty placeholder.
+  createRenderEffect(
+    () => [selectEl(), nativeSelectValue()] as const,
+    ([el, next]) => {
+      if (!el) return;
+      if (Array.isArray(next)) {
+        const selected = new Set(next);
+        for (const option of el.options) {
+          option.selected = selected.has(option.value);
+        }
+      } else if (el.value !== next) {
+        el.value = next;
+      }
+    },
+  );
 
   // Set up form reset handler
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     const p = getProps();
-    if (!selectRef) return;
+    const el = selectEl();
+    if (!el) return;
 
-    const form = selectRef.form;
+    const form = el.form;
     if (!form) return;
 
     const handleReset = () => {
@@ -68,31 +142,27 @@ export function createHiddenSelect<T>(
 
     form.addEventListener("reset", handleReset);
 
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       form.removeEventListener("reset", handleReset);
     });
-  });
-
-  // Set up form validation handler for native validation
-  createEffect(() => {
-    const p = getProps();
-    if (!selectRef || p.validationBehavior !== "native" || !p.validationState) return;
 
-    createFormValidation(
-      {
-        validationBehavior: p.validationBehavior,
-        focus: () => p.triggerRef?.()?.focus(),
-      },
-      p.validationState,
-      () => selectRef,
-    );
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   return {
     get containerProps() {
       return {
-        "aria-hidden": true,
+        style: {
+          ...visuallyHiddenStyles,
+          position: "fixed",
+          top: 0,
+          left: 0,
+        },
+        "aria-hidden": "true",
         "data-a11y-ignore": "aria-hidden-focus",
+        "data-react-aria-prevent-focus": true,
       } as JSX.HTMLAttributes<HTMLDivElement>;
     },
     get selectProps() {
@@ -112,10 +182,23 @@ export function createHiddenSelect<T>(
         selectedKeys === "all"
           ? Array.from(state.collection()).map((item) => String(item.key))
           : Array.from(selectedKeys).map(String);
+      const applyNativeSelectChange = (e: Event) => {
+        const target = e.target as HTMLSelectElement;
+        if (isMultiple) {
+          if (typeof state.setSelectedKeys === "function") {
+            state.setSelectedKeys(Array.from(target.selectedOptions).map((o) => o.value as Key));
+          } else {
+            const first = target.selectedOptions[0]?.value;
+            state.setSelectedKey((first ?? null) as Key | null);
+          }
+        } else {
+          state.setSelectedKey(target.value as Key);
+        }
+      };
 
       return {
         ref: (el: HTMLSelectElement) => {
-          selectRef = el;
+          assignSelectRef(el ?? undefined);
         },
         tabIndex: -1,
         autoComplete: p.autoComplete,
@@ -126,19 +209,9 @@ export function createHiddenSelect<T>(
         // Add required attribute for native form validation
         required: validationBehavior === "native" && p.isRequired,
         value: isMultiple ? multipleValue : selectedKey != null ? String(selectedKey) : "",
-        onChange: (e: Event) => {
-          const target = e.target as HTMLSelectElement;
-          if (isMultiple) {
-            if (typeof state.setSelectedKeys === "function") {
-              state.setSelectedKeys(Array.from(target.selectedOptions).map((o) => o.value as Key));
-            } else {
-              const first = target.selectedOptions[0]?.value;
-              state.setSelectedKey((first ?? null) as Key | null);
-            }
-          } else {
-            state.setSelectedKey(target.value as Key);
-          }
-        },
+        // RAC HiddenSelect.tsx:145-146 — autofill writes through `input` as well as `change`.
+        onChange: applyNativeSelectChange,
+        onInput: applyNativeSelectChange,
         style: {
           position: "absolute",
           top: 0,
@@ -197,8 +270,6 @@ export interface HiddenSelectProps<T> {
   form?: string;
   /** Validation behavior: 'aria' for realtime, 'native' for on submit. */
   validationBehavior?: ValidationBehavior;
-  /** Form validation state (optional, for native validation). */
-  validationState?: FormValidationState;
 }
 
 /**
@@ -206,7 +277,7 @@ export interface HiddenSelectProps<T> {
  * This is useful on mobile devices where native select behavior is preferred.
  */
 export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element {
-  const { containerProps, selectProps } = createHiddenSelect({
+  const { containerProps, selectProps, inputProps } = createHiddenSelect({
     get state() {
       return props.state;
     },
@@ -231,9 +302,6 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element {
     get triggerRef() {
       return props.triggerRef;
     },
-    get validationState() {
-      return props.validationState;
-    },
   });
 
   const collection = () => props.state.collection();
@@ -246,31 +314,60 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element {
         : new Set<Key>();
   const isMultiple = () =>
     typeof props.state.selectionMode === "function" && props.state.selectionMode() === "multiple";
+  const collectionSize = () => collection().size;
+  const hiddenInputValues = (): Array<Key | null> => {
+    if (isMultiple()) {
+      const keys = selectedKeys();
+      if (keys === "all") {
+        return Array.from(collection()).map((item) => item.key);
+      }
+      const listed = Array.from(keys as Set<Key>);
+      return listed.length === 0 ? [null] : listed;
+    }
+    return [selectedKey()];
+  };
 
+  // Mirror RAC HiddenSelect.tsx:172-244: a native <select> inside a <label>
+  // for collections of ≤300 items (autofill); hidden <input>s only when the
+  // collection is larger AND a form name is set. Never both.
   return (
-    <div {...containerProps}>
-      <label>
-        {props.label}
-        <select {...selectProps}>
-          <option />
-          <For each={Array.from(collection())}>
-            {(item) => (
-              <option
-                value={String(item.key)}
-                selected={
-                  isMultiple()
-                    ? selectedKeys() === "all"
-                      ? true
-                      : (selectedKeys() as Set<Key>).has(item.key)
-                    : item.key === selectedKey()
-                }
-              >
-                {item.textValue}
-              </option>
-            )}
+    <Show
+      when={collectionSize() <= 300}
+      fallback={
+        <Show when={props.name}>
+          <For each={hiddenInputValues()}>
+            {(value) => <input {...inputProps} value={value != null ? String(value) : ""} />}
           </For>
-        </select>
-      </label>
-    </div>
+        </Show>
+      }
+    >
+      <div {...containerProps} data-testid="hidden-select-container">
+        <label>
+          {props.label}
+          <select
+            {...selectProps}
+            value={
+              isMultiple()
+                ? selectedKeys() === "all"
+                  ? Array.from(collection()).map((item) => String(item.key))
+                  : Array.from(selectedKeys() as Set<Key>).map(String)
+                : selectedKey() != null
+                  ? String(selectedKey())
+                  : ""
+            }
+          >
+            <option value="" label={"\u00A0"}>
+              {"\u00A0"}
+            </option>
+            <For each={Array.from(collection()).filter((item) => item.type === "item")}>
+              {(item) => <option value={String(item.key)}>{item.textValue}</option>}
+            </For>
+            <Show when={collectionSize() === 0 && props.name}>
+              <For each={hiddenInputValues()}>{(value) => <option value={value ?? ""} />}</For>
+            </Show>
+          </select>
+        </label>
+      </div>
+    </Show>
   );
 }

package/src/select/createSelect.ts

@@ -1,18 +1,35 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/select/useSelect.ts
+
 /**
  * Provides the behavior and accessibility implementation for a select component.
  * A select displays a collapsible list of options and allows a user to select one of them.
  * Based on @react-aria/select useSelect.
  */
 
-import { type JSX, type Accessor, createEffect, onCleanup } from "solid-js";
+import { createTrackedEffect } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createPress } from "../interactions/createPress";
 import { createFocusRing } from "../interactions/createFocusRing";
-import { createLabel } from "../label/createLabel";
+import { createField } from "../label/createField";
 import { createTypeSelect } from "../selection/createTypeSelect";
 import { filterDOMProps } from "../utils/filterDOMProps";
 import { mergeProps } from "../utils/mergeProps";
 import { createId } from "../ssr";
 import { access, type MaybeAccessor } from "../utils/reactivity";
+import { nodeContains } from "../utils/dom";
 import type { SelectState, CollectionNode } from "@proyecto-viviana/solid-stately";
 
 export interface AriaSelectProps {
@@ -24,8 +41,16 @@ export interface AriaSelectProps {
   isRequired?: boolean;
   /** Whether the select is invalid. */
   isInvalid?: boolean;
+  /** @deprecated Use isInvalid instead. */
+  validationState?: "valid" | "invalid";
+  /** Custom validation function. */
+  validate?: (value: unknown) => boolean | string | string[] | null | undefined;
   /** The label for the select. */
   label?: JSX.Element;
+  /** A description for the select. Provides a hint such as specific requirements for what to choose. */
+  description?: JSX.Element;
+  /** An error message for the select. */
+  errorMessage?: JSX.Element;
   /** An accessible label for the select when no visible label is provided. */
   "aria-label"?: string;
   /** The ID of an element that labels the select. */
@@ -105,36 +130,55 @@ export function createSelect<T>(
   const buttonId = `${id}-button`;
   const listBoxId = `${id}-listbox`;
   const valueId = `${id}-value`;
-  const descriptionId = `${id}-description`;
-  const errorMessageId = `${id}-error`;
 
   // Filter DOM props
   const domProps = () =>
     filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
 
   // Share data with child options
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     selectData.set(state, { id });
 
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       selectData.delete(state);
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
-  // Label handling
-  const { labelProps, fieldProps } = createLabel({
+  // RAC `useSelect.ts:181-186`: field wiring (label + description/error slot
+  // ids + trigger `aria-describedby`) comes from `useField`, with
+  // `labelElementType: 'span'`. `createField` already ports `useField`, including
+  // `createSlotId` so ids exist only when the slot is in the DOM.
+  const field = createField({
     get id() {
       return buttonId;
     },
     get label() {
       return getProps().label;
     },
+    get description() {
+      return getProps().description;
+    },
+    get errorMessage() {
+      return getProps().errorMessage;
+    },
+    get isInvalid() {
+      return getProps().isInvalid;
+    },
     get "aria-label"() {
       return getProps()["aria-label"];
     },
     get "aria-labelledby"() {
       return getProps()["aria-labelledby"];
     },
+    get "aria-describedby"() {
+      return getProps()["aria-describedby"];
+    },
     labelElementType: "span",
   });
 
@@ -365,12 +409,13 @@ export function createSelect<T>(
 
   return {
     get labelProps() {
-      return labelProps as JSX.HTMLAttributes<HTMLElement>;
+      return field.labelProps as JSX.HTMLAttributes<HTMLElement>;
     },
     get triggerProps() {
       const p = getProps();
       const isOpen = state.isOpen();
       const isDisabled = p.isDisabled ?? state.isDisabled;
+      const fieldProps = field.fieldProps;
 
       const baseProps = mergeProps(
         domProps(),
@@ -386,16 +431,19 @@ export function createSelect<T>(
           "aria-controls": isOpen ? listBoxId : undefined,
           "aria-disabled": isDisabled || undefined,
           "aria-required": p.isRequired || undefined,
-          "aria-describedby": p["aria-describedby"] || undefined,
-          // Mirror upstream `useSelect`: the trigger's accessible name folds the
-          // SELECTED VALUE ("Pro") ahead of the field label ("Plan") → "Pro Plan"
-          // via `aria-labelledby=[valueId, labelId]`. Only wire this when there is
-          // a real visible label; with an `aria-label` (no `labelledby`) the field
-          // props' `aria-label` stays the trigger name (label-less legacy path,
-          // keeps TabsPicker/label-less Select unchanged).
-          "aria-labelledby": fieldProps["aria-labelledby"]
-            ? [valueId, fieldProps["aria-labelledby"]].filter(Boolean).join(" ")
-            : undefined,
+          // Mirror upstream `useSelect` exactly: the trigger name starts with
+          // the selected value, then the visible label. When only `aria-label`
+          // is present, the trigger references itself so that label follows the
+          // value as well ("Pro Plan"), rather than masking visible text.
+          // `aria-describedby` comes from `createField` (`useField.ts:51-60`) —
+          // do not overwrite it with the raw user prop.
+          "aria-labelledby": [
+            valueId,
+            fieldProps["aria-labelledby"],
+            fieldProps["aria-label"] && !fieldProps["aria-labelledby"] ? fieldProps.id : undefined,
+          ]
+            .filter(Boolean)
+            .join(" "),
           onKeyDown,
           onFocus: handleFocus,
           onBlur: handleBlur,
@@ -425,21 +473,23 @@ export function createSelect<T>(
     // the RAC Button, which needs the button's live `isPressed`.
     isPressed,
     get menuProps() {
+      const fieldProps = field.fieldProps;
       return {
         id: listBoxId,
         role: "listbox",
-        // Mirror upstream `useSelect`: the listbox is labelled by the FIELD LABEL
-        // (`fieldProps['aria-labelledby']` → the visible "Plan" label), NOT the
-        // trigger button — the button's own accessible name folds in the selected
-        // value ("Pro Plan"), which must not leak onto the listbox. Only when
-        // there is no visible label (an `aria-label` on the field) does it fall
-        // back to the trigger id (unchanged legacy behavior for label-less use).
-        "aria-labelledby": fieldProps["aria-labelledby"] ?? buttonId,
-        "aria-multiselectable": state.selectionMode() === "multiple" ? true : undefined,
+        // Mirror upstream `useSelect`: a visible field label names the listbox;
+        // the trigger is the fallback only for the `aria-label` branch.
+        "aria-labelledby": [
+          fieldProps["aria-labelledby"],
+          fieldProps["aria-label"] && !fieldProps["aria-labelledby"] ? fieldProps.id : undefined,
+        ]
+          .filter(Boolean)
+          .join(" "),
+        "aria-multiselectable": state.selectionMode() === "multiple" ? "true" : undefined,
         tabIndex: -1,
         onBlur: (e: FocusEvent) => {
           // Only a blur that leaves the listbox entirely blurs the select.
-          if ((e.currentTarget as Node | null)?.contains(e.relatedTarget as Node)) {
+          if (nodeContains(e.currentTarget as Node, e.relatedTarget as Node)) {
             return;
           }
 
@@ -450,14 +500,10 @@ export function createSelect<T>(
       } as JSX.HTMLAttributes<HTMLElement>;
     },
     get descriptionProps() {
-      return {
-        id: descriptionId,
-      } as JSX.HTMLAttributes<HTMLElement>;
+      return field.descriptionProps;
     },
     get errorMessageProps() {
-      return {
-        id: errorMessageId,
-      } as JSX.HTMLAttributes<HTMLElement>;
+      return field.errorMessageProps;
     },
     isFocused,
     isFocusVisible: () => isFocused() && isFocusVisible(),

package/src/selection/DOMLayoutDelegate.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/selection/DOMLayoutDelegate.ts
+
 /**
  * DOMLayoutDelegate - reads layout information for collection items directly
  * from the DOM, used by {@link ListKeyboardDelegate} for page up/down

package/src/selection/ListKeyboardDelegate.ts

@@ -1,6 +1,21 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/selection/ListKeyboardDelegate.ts
+
 /**
  * ListKeyboardDelegate - keyboard navigation for a list/stack collection.
- * Based on @react-aria/selection's `ListKeyboardDelegate`.
+ * Based on
+ * `packages/react-aria/src/selection/ListKeyboardDelegate.ts`.
  *
  * React → Solid adaptations (faithful to upstream behavior):
  *  - The ref is a Solid accessor (`() => HTMLElement | null`) rather than a

package/src/selection/constants.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/constants.ts
+
 /**
  * Custom DOM event names used to drive virtual focus into a selectable
  * collection from an outside controller (e.g. an Autocomplete input). Mirrors