@proyecto-viviana/solid-stately 0.5.1 → 0.6.0-rc.1

package/src/radio/createRadioGroupState.ts

@@ -1,3 +1,17 @@
+/*
+ * 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-stately/src/radio/useRadioGroupState.ts
+
 /**
  * Radio group state for Solid Stately
  *
@@ -7,8 +21,8 @@
  * This is a 1:1 port of @react-stately/radio's useRadioGroupState.
  */
 
-import { createMemo, createSignal, Accessor, untrack } from "solid-js";
-import { type MaybeAccessor, access } from "../utils";
+import { createMemo, Accessor, untrack } from "solid-js";
+import { createInternalSignal, type MaybeAccessor, access } from "../utils";
 import { createId } from "../ssr";
 import {
   createFormValidationState,
@@ -123,15 +137,15 @@ export function createRadioGroupState(props: MaybeAccessor<RadioGroupProps> = {}
 
   // Create internal signal for uncontrolled mode
   // Initialize with defaultValue only (not value, which is for controlled mode)
-  const [internalValue, setInternalValue] = createSignal<string | null>(
+  const [internalValue, setInternalValue] = createInternalSignal<string | null>(
     initialProps.defaultValue ?? null,
   );
-  const [lastFocusedValue, setLastFocusedValueInternal] = createSignal<string | null>(null);
+  const [lastFocusedValue, setLastFocusedValueInternal] = createInternalSignal<string | null>(null);
 
   // SolidJS-specific: Version counter for triggering DOM sync across all radios
   // This handles the case where native radio behavior causes DOM state to desync
   // from our reactive state (e.g., clicking a radio unchecks siblings in the DOM)
-  const [syncVersion, setSyncVersion] = createSignal(0);
+  const [syncVersion, setSyncVersion] = createInternalSignal(0);
 
   const controlledValue = createMemo<string | null | undefined>(() => {
     const value = getProps().value;
@@ -206,7 +220,10 @@ export function createRadioGroupState(props: MaybeAccessor<RadioGroupProps> = {}
   const state: RadioGroupState = {
     name,
     selectedValue,
-    defaultSelectedValue: initialProps.defaultValue ?? null,
+    // useRadioGroupState.ts:125 — a controlled value, including null, is the
+    // reset default. defaultValue applies only while uncontrolled.
+    defaultSelectedValue:
+      initialProps.value !== undefined ? initialProps.value : (initialProps.defaultValue ?? null),
     setSelectedValue,
     lastFocusedValue,
     setLastFocusedValue,

package/src/searchfield/createSearchFieldState.ts

@@ -1,10 +1,25 @@
+/*
+ * 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-stately/src/searchfield/useSearchFieldState.ts
+
 /**
  * Creates state for a search field component.
  * Based on @react-stately/searchfield useSearchFieldState.
  */
 
-import { type Accessor, createSignal, createMemo } from "solid-js";
-import { access, type MaybeAccessor } from "../utils";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal, access, type MaybeAccessor } from "../utils";
 
 export interface SearchFieldStateProps {
   /** The current value (controlled). */
@@ -32,7 +47,7 @@ export function createSearchFieldState(
 
   const isControlled = () => getProps().value !== undefined;
 
-  const [internalValue, setInternalValue] = createSignal(getProps().defaultValue ?? "");
+  const [internalValue, setInternalValue] = createInternalSignal(getProps().defaultValue ?? "");
 
   const value = createMemo(() => {
     const p = getProps();

package/src/select/createSelectState.ts

@@ -1,17 +1,51 @@
+/*
+ * 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-stately/src/select/useSelectState.ts
+
 /**
  * State management for select components.
  * Based on @react-stately/select useSelectState.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
-import { access, type MaybeAccessor } from "../utils";
+import { createMemo, untrack } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal, propsAccessor, type MaybeAccessor } from "../utils";
 import { createListState } from "../collections/createListState";
 import { createOverlayTriggerState } from "../overlays";
-import type { Key, CollectionNode, Collection } from "../collections/types";
-import type { SelectionMode, Selection } from "../collections/types";
+import type { Key, CollectionNode, Collection, FocusStrategy } from "../collections/types";
 import type { SelectionManager } from "../selection/SelectionManager";
+import {
+  createFormValidationState,
+  type FormValidationState,
+  type ValidationFunction,
+} from "../form";
+
+/** Select never uses the collection `"none"` mode. */
+export type SelectSelectionMode = "single" | "multiple";
+
+/** Single mode is `Key | null`. Multiple mode is `readonly Key[]`. */
+export type SelectValueType<M extends SelectSelectionMode> = M extends "single"
+  ? Key | null
+  : readonly Key[];
+
+/** `onChange` receives a mutable `Key[]` in multiple mode. */
+export type SelectChangeValueType<M extends SelectSelectionMode> = M extends "single"
+  ? Key | null
+  : Key[];
 
-export interface SelectStateProps<T = unknown> {
+type SelectValidationType<M extends SelectSelectionMode> = M extends "single" ? Key : Key[];
+
+export interface SelectStateProps<T = unknown, M extends SelectSelectionMode = "single"> {
   /** The items to display in the select. */
   items: T[];
   /** Function to get the key for an item. */
@@ -22,33 +56,71 @@ export interface SelectStateProps<T = unknown> {
   getDisabled?: (item: T) => boolean;
   /** Keys of disabled items. */
   disabledKeys?: Iterable<Key>;
-  /** The currently selected key (controlled). */
+  /**
+   * Whether single or multiple selection is enabled.
+   * @default 'single'
+   */
+  selectionMode?: M;
+  /**
+   * The current value (controlled).
+   * Single mode is `Key | null`. Multiple mode is `readonly Key[]`.
+   */
+  value?: SelectValueType<M>;
+  /** The default value (uncontrolled). */
+  defaultValue?: SelectValueType<M>;
+  /** Handler called when the value changes. */
+  onChange?: (value: SelectChangeValueType<M>) => void;
+  /**
+   * The currently selected key in the collection (controlled).
+   * @deprecated Use `value`.
+   */
   selectedKey?: Key | null;
-  /** The default selected key (uncontrolled). */
+  /**
+   * The initial selected key in the collection (uncontrolled).
+   * @deprecated Use `defaultValue`.
+   */
   defaultSelectedKey?: Key | null;
-  /** The selected keys (controlled, for multiple selection mode). */
-  selectedKeys?: "all" | Iterable<Key>;
-  /** Default selected keys (uncontrolled, for multiple selection mode). */
-  defaultSelectedKeys?: "all" | Iterable<Key>;
-  /** Handler called when the selection changes. */
+  /**
+   * Handler that is called when the selection changes.
+   * @deprecated Use `onChange`.
+   */
   onSelectionChange?: (key: Key | null) => void;
-  /** Handler called when selected keys change. */
-  onSelectionChangeKeys?: (keys: Selection) => void;
-  /** Selection mode for the select. */
-  selectionMode?: Extract<SelectionMode, "single" | "multiple">;
   /** Whether the select is open (controlled). */
   isOpen?: boolean;
   /** Whether the select is open by default (uncontrolled). */
   defaultOpen?: boolean;
   /** Handler called when the open state changes. */
   onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * Whether the Select should close when an item is selected. Defaults to true
+   * when selectionMode is single, false otherwise.
+   */
+  shouldCloseOnSelect?: boolean;
+  /** Whether the select should be allowed to be open when the collection is empty. */
+  allowsEmptyCollection?: boolean;
   /** Whether the select is disabled. */
   isDisabled?: boolean;
   /** Whether the select is required. */
   isRequired?: boolean;
+  /** Whether the select is invalid (controlled). */
+  isInvalid?: boolean;
+  /** @deprecated Use isInvalid instead. */
+  validationState?: "valid" | "invalid";
+  /** Custom validation function. */
+  validate?: ValidationFunction<SelectValidationType<M> | null>;
+  /**
+   * Whether to use native HTML form validation or ARIA validation semantics.
+   * @default "native"
+   */
+  validationBehavior?: "aria" | "native";
+  /** Field name(s) for server error lookup. */
+  name?: string | string[];
 }
 
-export interface SelectState<T = unknown> {
+export interface SelectState<
+  T = unknown,
+  M extends SelectSelectionMode = "single",
+> extends FormValidationState {
   /** The collection of items. */
   readonly collection: Accessor<Collection<T>>;
   /**
@@ -59,23 +131,48 @@ export interface SelectState<T = unknown> {
   /** Whether the select dropdown is open. */
   readonly isOpen: Accessor<boolean>;
   /** Open the select dropdown. */
-  open(): void;
+  open(focusStrategy?: FocusStrategy | null): void;
   /** Close the select dropdown. */
   close(): void;
   /** Toggle the select dropdown. */
-  toggle(): void;
-  /** The currently selected key. */
+  toggle(focusStrategy?: FocusStrategy | null): void;
+  /** Controls which item will be auto focused when the menu opens. */
+  readonly focusStrategy: Accessor<FocusStrategy | null>;
+  /**
+   * The key for the first selected item.
+   * @deprecated Use `value`.
+   */
   readonly selectedKey: Accessor<Key | null>;
-  /** The selected keys. */
-  readonly selectedKeys: Accessor<Selection>;
-  /** The currently selected item. */
-  readonly selectedItem: Accessor<CollectionNode<T> | null>;
-  /** The currently selected items. */
-  readonly selectedItems: Accessor<CollectionNode<T>[]>;
-  /** Set the selected key. */
+  /**
+   * The default selected key.
+   * @deprecated Use `defaultValue`.
+   */
+  readonly defaultSelectedKey: Key | null;
+  /**
+   * Sets the selected key.
+   * @deprecated Use `setValue`.
+   */
   setSelectedKey(key: Key | null): void;
-  /** Set selected keys. */
+  /** The current select value. */
+  readonly value: Accessor<SelectValueType<M>>;
+  /** The default select value. */
+  readonly defaultValue: SelectValueType<M>;
+  /** Sets the select value. */
+  setValue(value: Key | readonly Key[] | null): void;
+  /**
+   * Selected keys derived from `value`.
+   * Kept for list and hidden-select adapters. Never `"all"`.
+   */
+  readonly selectedKeys: Accessor<Set<Key>>;
+  /** Replace the selected keys. */
   setSelectedKeys(keys: Iterable<Key>): void;
+  /**
+   * The value of the first selected item.
+   * @deprecated Use `selectedItems`.
+   */
+  readonly selectedItem: Accessor<CollectionNode<T> | null>;
+  /** The value of the selected items. */
+  readonly selectedItems: Accessor<CollectionNode<T>[]>;
   /** The currently focused key. */
   readonly focusedKey: Accessor<Key | null>;
   /** Set the focused key. */
@@ -91,20 +188,29 @@ export interface SelectState<T = unknown> {
   /** Whether the select is required. */
   readonly isRequired: boolean;
   /** The selection mode. */
-  readonly selectionMode: Accessor<"single" | "multiple">;
+  readonly selectionMode: Accessor<M>;
+  /** Whether selecting an item closes the menu. */
+  readonly shouldCloseOnSelect: Accessor<boolean>;
+}
+
+function convertValue(value: Key | readonly Key[] | null | undefined): readonly Key[] | undefined {
+  if (value === undefined) return undefined;
+  if (value === null || typeof value === "string" || typeof value === "number") {
+    return value == null ? [] : [value];
+  }
+  return value;
 }
 
 /**
  * Creates state for a select component.
  * Combines list state with overlay trigger state for dropdown behavior.
  */
-export function createSelectState<T = unknown>(
-  props: MaybeAccessor<SelectStateProps<T>>,
-): SelectState<T> {
-  const getProps = () => access(props);
-  const selectionMode: Accessor<"single" | "multiple"> = () => getProps().selectionMode ?? "single";
+export function createSelectState<T = unknown, M extends SelectSelectionMode = "single">(
+  props: MaybeAccessor<SelectStateProps<T, M>>,
+): SelectState<T, M> {
+  const getProps = propsAccessor(props);
+  const selectionMode: Accessor<M> = () => (getProps().selectionMode ?? "single") as M;
 
-  // Overlay trigger state for open/close
   const overlayState = createOverlayTriggerState({
     get isOpen() {
       return getProps().isOpen;
@@ -117,83 +223,155 @@ export function createSelectState<T = unknown>(
     },
   });
 
-  // Track selected key
-  const isControlledSingle = () => getProps().selectedKey !== undefined;
-  const isControlledMultiple = () => getProps().selectedKeys !== undefined;
-  const [internalSelectedKey, setInternalSelectedKey] = createSignal<Key | null>(
-    getProps().defaultSelectedKey ?? null,
-  );
-  const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<Selection>(
-    getProps().defaultSelectedKeys === "all"
-      ? "all"
-      : new Set(getProps().defaultSelectedKeys ?? []),
-  );
+  const resolvedDefault = untrack((): Key | readonly Key[] | null => {
+    const current = getProps();
+    if (current.defaultValue !== undefined) {
+      return current.defaultValue as Key | readonly Key[] | null;
+    }
+    const mode = current.selectionMode ?? "single";
+    return mode === "single" ? (current.defaultSelectedKey ?? null) : [];
+  });
 
-  const selectedKey: Accessor<Key | null> = () => {
-    if (selectionMode() === "multiple") {
-      const keys = selectedKeys();
-      if (keys === "all") return null;
-      return keys.size > 0 ? Array.from(keys)[0] : null;
+  const controlledProp = (): SelectValueType<M> | undefined => {
+    const current = getProps();
+    if (current.value !== undefined) return current.value;
+    if (selectionMode() === "single" && current.selectedKey !== undefined) {
+      return (current.selectedKey ?? null) as SelectValueType<M>;
     }
+    return undefined;
+  };
+
+  const [internalValue, setInternalValue] = createInternalSignal<Key | readonly Key[] | null>(
+    resolvedDefault,
+  );
 
-    return isControlledSingle() ? (getProps().selectedKey ?? null) : internalSelectedKey();
+  const readControlled = (): Key | readonly Key[] | null | undefined => {
+    const controlled = controlledProp();
+    return controlled === undefined ? undefined : (controlled as Key | readonly Key[] | null);
   };
 
-  const setSelectedKey = (key: Key | null) => {
-    if (selectionMode() === "multiple") {
-      if (key == null) {
-        if (!isControlledMultiple()) {
-          setInternalSelectedKeys(new Set<Key>());
-        }
-        getProps().onSelectionChangeKeys?.(new Set<Key>());
-        getProps().onSelectionChange?.(null);
-      } else {
-        const next = new Set([key]);
-        if (!isControlledMultiple()) {
-          setInternalSelectedKeys(next);
+  let valueRef: Key | readonly Key[] | null = untrack(() => {
+    const controlled = readControlled();
+    return controlled !== undefined ? controlled : internalValue();
+  });
+  let wroteThisTurn = false;
+
+  const syncValueRef = () => {
+    if (wroteThisTurn) return;
+    const controlled = readControlled();
+    valueRef = controlled !== undefined ? controlled : untrack(internalValue);
+  };
+
+  const displayValue = (): Key | readonly Key[] | null => {
+    const controlled = readControlled();
+    const raw = controlled !== undefined ? controlled : internalValue();
+    if (
+      selectionMode() === "single" &&
+      raw !== null &&
+      typeof raw !== "string" &&
+      typeof raw !== "number"
+    ) {
+      return raw[0] ?? null;
+    }
+    return raw;
+  };
+
+  const setValue = (next: Key | readonly Key[] | null) => {
+    syncValueRef();
+    if (selectionMode() === "single") {
+      const key: Key | null =
+        typeof next === "string" || typeof next === "number"
+          ? next
+          : next === null
+            ? null
+            : (next[0] ?? null);
+      // Both callbacks follow this request, not a comparison with displayValue.
+      // A refused controlled value stays stale for the turn, so a second
+      // same-key call would notify the legacy callback again. React Stately
+      // still compares displayValue; this is the Solid same-turn adaptation.
+      // A later turn resyncs valueRef, and a different key is its own request.
+      if (!Object.is(valueRef, key)) {
+        valueRef = key;
+        wroteThisTurn = true;
+        queueMicrotask(() => {
+          wroteThisTurn = false;
+        });
+        if (controlledProp() === undefined) {
+          setInternalValue(key);
         }
-        getProps().onSelectionChangeKeys?.(next);
+        getProps().onChange?.(key as SelectChangeValueType<M>);
         getProps().onSelectionChange?.(key);
       }
       return;
     }
 
-    if (!isControlledSingle()) {
-      setInternalSelectedKey(key);
-    }
-    getProps().onSelectionChange?.(key);
-    getProps().onSelectionChangeKeys?.(key != null ? new Set([key]) : new Set<Key>());
-  };
-
-  const selectedKeys: Accessor<Selection> = createMemo(() => {
-    if (selectionMode() === "multiple") {
-      if (isControlledMultiple()) {
-        const keys = getProps().selectedKeys;
-        return keys === "all" ? "all" : new Set<Key>(keys ?? []);
+    // Keep the readonly list for state. `onChange` receives its own mutable copy.
+    const keys: readonly Key[] =
+      typeof next === "string" || typeof next === "number" ? [next] : next === null ? [] : next;
+    if (!Object.is(valueRef, keys)) {
+      valueRef = keys;
+      wroteThisTurn = true;
+      queueMicrotask(() => {
+        wroteThisTurn = false;
+      });
+      if (controlledProp() === undefined) {
+        setInternalValue(keys);
       }
-      return internalSelectedKeys();
+      getProps().onChange?.([...keys] as SelectChangeValueType<M>);
     }
-
-    const key = selectedKey();
-    return key != null ? new Set<Key>([key]) : new Set<Key>();
-  });
+  };
 
   const setSelectedKeys = (keys: Iterable<Key>) => {
-    const next = new Set(keys);
     if (selectionMode() === "multiple") {
-      if (!isControlledMultiple()) {
-        setInternalSelectedKeys(next);
-      }
-      getProps().onSelectionChangeKeys?.(next);
-      getProps().onSelectionChange?.(next.size > 0 ? Array.from(next)[0] : null);
+      setValue([...keys]);
       return;
     }
-
-    const key = next.size > 0 ? Array.from(next)[0] : null;
-    setSelectedKey(key);
+    let key: Key | null = null;
+    for (const item of keys) {
+      key = item;
+      break;
+    }
+    setValue(key);
   };
 
-  // Create list state with select selection mode
+  const initialDisplay = untrack(displayValue);
+  const stateDefaultValue = (resolvedDefault ?? initialDisplay) as SelectValueType<M>;
+  const defaultSelectedKey =
+    untrack(() => getProps().defaultSelectedKey) ??
+    (untrack(() => getProps().selectionMode) === "single" ? (initialDisplay as Key) : null);
+
+  const shouldCloseOnSelect = () => getProps().shouldCloseOnSelect ?? selectionMode() === "single";
+
+  const validation = createFormValidationState({
+    get value() {
+      const display = displayValue();
+      if (
+        display !== null &&
+        typeof display !== "string" &&
+        typeof display !== "number" &&
+        display.length === 0
+      ) {
+        return null;
+      }
+      return display;
+    },
+    get isInvalid() {
+      return getProps().isInvalid;
+    },
+    get validationState() {
+      return getProps().validationState;
+    },
+    get validate() {
+      return getProps().validate as ValidationFunction<unknown> | undefined;
+    },
+    get name() {
+      return getProps().name;
+    },
+    get validationBehavior() {
+      return getProps().validationBehavior ?? "native";
+    },
+  });
+
   const listState = createListState<T>({
     get items() {
       return getProps().items;
@@ -213,40 +391,39 @@ export function createSelectState<T = unknown>(
     get selectionMode() {
       return selectionMode();
     },
-    disallowEmptySelection: true,
+    // Upstream only requires a value in single-selection mode. Multiple
+    // selection must permit toggling the last selected option off.
+    get disallowEmptySelection() {
+      return selectionMode() === "single";
+    },
+    allowDuplicateSelectionEvents: true,
     get selectedKeys() {
-      const keys = selectedKeys();
-      if (keys === "all") return "all";
-      return keys;
+      return convertValue(displayValue()) ?? [];
     },
     onSelectionChange(keys) {
-      if (selectionMode() === "multiple") {
-        if (!isControlledMultiple()) {
-          setInternalSelectedKeys(keys);
-        }
-        getProps().onSelectionChangeKeys?.(keys);
-        if (keys !== "all") {
-          getProps().onSelectionChange?.(keys.size > 0 ? Array.from(keys)[0] : null);
-        }
-        return;
-      }
-
-      // Get the first (and only) selected key
       if (keys === "all") return;
-      const key = keys.size > 0 ? Array.from(keys)[0] : null;
-      setSelectedKey(key);
-      // Close the dropdown after selection in single mode
-      overlayState.close();
+      if (selectionMode() === "single") {
+        setValue(keys.values().next().value ?? null);
+      } else {
+        setValue([...keys]);
+      }
+      if (shouldCloseOnSelect()) {
+        overlayState.close();
+      }
+      validation.commitValidation();
     },
   });
 
+  const [focusStrategy, setFocusStrategy] = createInternalSignal<FocusStrategy | null>(null);
   // The select's own focus state (the trigger), separate from the collection's
   // focus-within state on the selection manager — upstream useSelectState keeps
   // these apart with a dedicated useState. Sharing the manager's signal makes
   // trigger focus re-arm the item roving-focus effect and steal focus back.
-  const [isFocused, setFocused] = createSignal(false);
+  const [isFocused, setFocused] = createInternalSignal(false);
+
+  const selectedKey: Accessor<Key | null> = () => listState.selectionManager.firstSelectedKey;
+  const selectedKeys: Accessor<Set<Key>> = () => new Set(convertValue(displayValue()) ?? []);
 
-  // Get the selected item from the collection (memoized)
   const selectedItem: Accessor<CollectionNode<T> | null> = createMemo(() => {
     const key = selectedKey();
     if (key == null) return null;
@@ -254,43 +431,53 @@ export function createSelectState<T = unknown>(
   });
 
   const selectedItems: Accessor<CollectionNode<T>[]> = createMemo(() => {
-    const keys = selectedKeys();
-    if (keys === "all") {
-      return Array.from(listState.collection());
-    }
-
     const items: CollectionNode<T>[] = [];
-    for (const key of keys) {
+    for (const key of listState.selectionManager.selectedKeys) {
       const item = listState.collection().getItem(key);
       if (item) items.push(item);
     }
     return items;
   });
 
+  const canOpenMenu = () =>
+    listState.collection().size !== 0 || getProps().allowsEmptyCollection === true;
+
   return {
-    // Collection
+    realtimeValidation: validation.realtimeValidation,
+    displayValidation: validation.displayValidation,
+    updateValidation: validation.updateValidation,
+    resetValidation: validation.resetValidation,
+    commitValidation: validation.commitValidation,
     collection: listState.collection,
     selectionManager: listState.selectionManager,
-
-    // Focus management
     focusedKey: listState.focusedKey,
     setFocusedKey: listState.setFocusedKey,
     isFocused,
     setFocused,
-
-    // Overlay state
     isOpen: overlayState.isOpen,
-    open: overlayState.open,
+    open(strategy: FocusStrategy | null = null) {
+      if (!canOpenMenu()) return;
+      setFocusStrategy(strategy);
+      overlayState.open();
+    },
     close: overlayState.close,
-    toggle: overlayState.toggle,
-
-    // Select-specific
+    toggle(strategy: FocusStrategy | null = null) {
+      if (!canOpenMenu()) return;
+      setFocusStrategy(strategy);
+      overlayState.toggle();
+    },
+    focusStrategy,
     selectionMode,
+    shouldCloseOnSelect,
+    value: () => displayValue() as SelectValueType<M>,
+    defaultValue: stateDefaultValue,
+    setValue,
     selectedKey,
+    defaultSelectedKey,
+    setSelectedKey: setValue,
     selectedKeys,
     selectedItem,
     selectedItems,
-    setSelectedKey,
     setSelectedKeys,
     isKeyDisabled: (key: Key) => listState.isDisabled(key),
     get isDisabled() {