@proyecto-viviana/solid-stately 0.2.4 → 0.3.0

package/src/select/createSelectState.ts

@@ -1,181 +1,290 @@
-/**
- * State management for select components.
- * Based on @react-stately/select useSelectState.
- */
-
-import { createSignal, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-import { createListState } from '../collections/createListState';
-import { createOverlayTriggerState } from '../overlays';
-import type { Key, CollectionNode, Collection } from '../collections/types';
-
-export interface SelectStateProps<T = unknown> {
-  /** The items to display in the select. */
-  items: T[];
-  /** Function to get the key for an item. */
-  getKey?: (item: T) => Key;
-  /** Function to get the text value for an item. */
-  getTextValue?: (item: T) => string;
-  /** Function to check if an item is disabled. */
-  getDisabled?: (item: T) => boolean;
-  /** Keys of disabled items. */
-  disabledKeys?: Iterable<Key>;
-  /** The currently selected key (controlled). */
-  selectedKey?: Key | null;
-  /** The default selected key (uncontrolled). */
-  defaultSelectedKey?: Key | null;
-  /** Handler called when the selection changes. */
-  onSelectionChange?: (key: Key | null) => void;
-  /** 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 is disabled. */
-  isDisabled?: boolean;
-  /** Whether the select is required. */
-  isRequired?: boolean;
-}
-
-export interface SelectState<T = unknown> {
-  /** The collection of items. */
-  readonly collection: Accessor<Collection<T>>;
-  /** Whether the select dropdown is open. */
-  readonly isOpen: Accessor<boolean>;
-  /** Open the select dropdown. */
-  open(): void;
-  /** Close the select dropdown. */
-  close(): void;
-  /** Toggle the select dropdown. */
-  toggle(): void;
-  /** The currently selected key. */
-  readonly selectedKey: Accessor<Key | null>;
-  /** The currently selected item. */
-  readonly selectedItem: Accessor<CollectionNode<T> | null>;
-  /** Set the selected key. */
-  setSelectedKey(key: Key | null): void;
-  /** The currently focused key. */
-  readonly focusedKey: Accessor<Key | null>;
-  /** Set the focused key. */
-  setFocusedKey(key: Key | null): void;
-  /** Whether the select has focus. */
-  readonly isFocused: Accessor<boolean>;
-  /** Set whether the select has focus. */
-  setFocused(isFocused: boolean): void;
-  /** Whether a specific key is disabled. */
-  isKeyDisabled(key: Key): boolean;
-  /** Whether the select is disabled. */
-  readonly isDisabled: boolean;
-  /** Whether the select is required. */
-  readonly isRequired: boolean;
-}
-
-/**
- * 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);
-
-  // Overlay trigger state for open/close
-  const overlayState = createOverlayTriggerState({
-    get isOpen() {
-      return getProps().isOpen;
-    },
-    get defaultOpen() {
-      return getProps().defaultOpen;
-    },
-    get onOpenChange() {
-      return getProps().onOpenChange;
-    },
-  });
-
-  // Track selected key
-  const isControlled = () => getProps().selectedKey !== undefined;
-  const [internalSelectedKey, setInternalSelectedKey] = createSignal<Key | null>(
-    getProps().defaultSelectedKey ?? null
-  );
-
-  const selectedKey: Accessor<Key | null> = () => {
-    return isControlled() ? (getProps().selectedKey ?? null) : internalSelectedKey();
-  };
-
-  const setSelectedKey = (key: Key | null) => {
-    if (!isControlled()) {
-      setInternalSelectedKey(key);
-    }
-    getProps().onSelectionChange?.(key);
-  };
-
-  // Create list state with single selection
-  const listState = createListState<T>({
-    get items() {
-      return getProps().items;
-    },
-    get getKey() {
-      return getProps().getKey;
-    },
-    get getTextValue() {
-      return getProps().getTextValue;
-    },
-    get getDisabled() {
-      return getProps().getDisabled;
-    },
-    get disabledKeys() {
-      return getProps().disabledKeys;
-    },
-    selectionMode: 'single',
-    disallowEmptySelection: true,
-    get selectedKeys() {
-      const key = selectedKey();
-      return key != null ? [key] : [];
-    },
-    onSelectionChange(keys) {
-      // Get the first (and only) selected key
-      if (keys === 'all') return; // Not applicable for single select
-      const key = keys.size > 0 ? Array.from(keys)[0] : null;
-      setSelectedKey(key);
-      // Close the dropdown after selection
-      overlayState.close();
-    },
-  });
-
-  // Get the selected item from the collection
-  const selectedItem: Accessor<CollectionNode<T> | null> = () => {
-    const key = selectedKey();
-    if (key == null) return null;
-    return listState.collection().getItem(key);
-  };
-
-  return {
-    // Collection
-    collection: listState.collection,
-
-    // Focus management
-    focusedKey: listState.focusedKey,
-    setFocusedKey: listState.setFocusedKey,
-    isFocused: listState.isFocused,
-    setFocused: listState.setFocused,
-
-    // Overlay state
-    isOpen: overlayState.isOpen,
-    open: overlayState.open,
-    close: overlayState.close,
-    toggle: overlayState.toggle,
-
-    // Select-specific
-    selectedKey,
-    selectedItem,
-    setSelectedKey,
-    isKeyDisabled: (key: Key) => listState.isDisabled(key),
-    get isDisabled() {
-      return getProps().isDisabled ?? false;
-    },
-    get isRequired() {
-      return getProps().isRequired ?? false;
-    },
-  };
-}
+/**
+ * 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 { createListState } from "../collections/createListState";
+import { createOverlayTriggerState } from "../overlays";
+import type { Key, CollectionNode, Collection } from "../collections/types";
+import type { SelectionMode, Selection } from "../collections/types";
+
+export interface SelectStateProps<T = unknown> {
+  /** The items to display in the select. */
+  items: T[];
+  /** Function to get the key for an item. */
+  getKey?: (item: T) => Key;
+  /** Function to get the text value for an item. */
+  getTextValue?: (item: T) => string;
+  /** Function to check if an item is disabled. */
+  getDisabled?: (item: T) => boolean;
+  /** Keys of disabled items. */
+  disabledKeys?: Iterable<Key>;
+  /** The currently selected key (controlled). */
+  selectedKey?: Key | null;
+  /** The default selected key (uncontrolled). */
+  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. */
+  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 is disabled. */
+  isDisabled?: boolean;
+  /** Whether the select is required. */
+  isRequired?: boolean;
+}
+
+export interface SelectState<T = unknown> {
+  /** The collection of items. */
+  readonly collection: Accessor<Collection<T>>;
+  /** Whether the select dropdown is open. */
+  readonly isOpen: Accessor<boolean>;
+  /** Open the select dropdown. */
+  open(): void;
+  /** Close the select dropdown. */
+  close(): void;
+  /** Toggle the select dropdown. */
+  toggle(): void;
+  /** The currently selected key. */
+  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. */
+  setSelectedKey(key: Key | null): void;
+  /** Set selected keys. */
+  setSelectedKeys(keys: Iterable<Key>): void;
+  /** The currently focused key. */
+  readonly focusedKey: Accessor<Key | null>;
+  /** Set the focused key. */
+  setFocusedKey(key: Key | null): void;
+  /** Whether the select has focus. */
+  readonly isFocused: Accessor<boolean>;
+  /** Set whether the select has focus. */
+  setFocused(isFocused: boolean): void;
+  /** Whether a specific key is disabled. */
+  isKeyDisabled(key: Key): boolean;
+  /** Whether the select is disabled. */
+  readonly isDisabled: boolean;
+  /** Whether the select is required. */
+  readonly isRequired: boolean;
+  /** The selection mode. */
+  readonly selectionMode: Accessor<"single" | "multiple">;
+}
+
+/**
+ * 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";
+
+  // Overlay trigger state for open/close
+  const overlayState = createOverlayTriggerState({
+    get isOpen() {
+      return getProps().isOpen;
+    },
+    get defaultOpen() {
+      return getProps().defaultOpen;
+    },
+    get onOpenChange() {
+      return getProps().onOpenChange;
+    },
+  });
+
+  // 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 selectedKey: Accessor<Key | null> = () => {
+    if (selectionMode() === "multiple") {
+      const keys = selectedKeys();
+      if (keys === "all") return null;
+      return keys.size > 0 ? Array.from(keys)[0] : null;
+    }
+
+    return isControlledSingle() ? (getProps().selectedKey ?? null) : internalSelectedKey();
+  };
+
+  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);
+        }
+        getProps().onSelectionChangeKeys?.(next);
+        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 ?? []);
+      }
+      return internalSelectedKeys();
+    }
+
+    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);
+      return;
+    }
+
+    const key = next.size > 0 ? Array.from(next)[0] : null;
+    setSelectedKey(key);
+  };
+
+  // Create list state with select selection mode
+  const listState = createListState<T>({
+    get items() {
+      return getProps().items;
+    },
+    get getKey() {
+      return getProps().getKey;
+    },
+    get getTextValue() {
+      return getProps().getTextValue;
+    },
+    get getDisabled() {
+      return getProps().getDisabled;
+    },
+    get disabledKeys() {
+      return getProps().disabledKeys;
+    },
+    get selectionMode() {
+      return selectionMode();
+    },
+    disallowEmptySelection: true,
+    get selectedKeys() {
+      const keys = selectedKeys();
+      if (keys === "all") return "all";
+      return keys;
+    },
+    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();
+    },
+  });
+
+  // Get the selected item from the collection (memoized)
+  const selectedItem: Accessor<CollectionNode<T> | null> = createMemo(() => {
+    const key = selectedKey();
+    if (key == null) return null;
+    return listState.collection().getItem(key);
+  });
+
+  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) {
+      const item = listState.collection().getItem(key);
+      if (item) items.push(item);
+    }
+    return items;
+  });
+
+  return {
+    // Collection
+    collection: listState.collection,
+
+    // Focus management
+    focusedKey: listState.focusedKey,
+    setFocusedKey: listState.setFocusedKey,
+    isFocused: listState.isFocused,
+    setFocused: listState.setFocused,
+
+    // Overlay state
+    isOpen: overlayState.isOpen,
+    open: overlayState.open,
+    close: overlayState.close,
+    toggle: overlayState.toggle,
+
+    // Select-specific
+    selectionMode,
+    selectedKey,
+    selectedKeys,
+    selectedItem,
+    selectedItems,
+    setSelectedKey,
+    setSelectedKeys,
+    isKeyDisabled: (key: Key) => listState.isDisabled(key),
+    get isDisabled() {
+      return getProps().isDisabled ?? false;
+    },
+    get isRequired() {
+      return getProps().isRequired ?? false;
+    },
+  };
+}

package/src/select/index.d.ts

@@ -1,2 +1,2 @@
-export { createSelectState, type SelectStateProps, type SelectState, } from './createSelectState';
-//# sourceMappingURL=index.d.ts.map
+export { createSelectState, type SelectStateProps, type SelectState } from "./createSelectState";
+//# sourceMappingURL=index.d.ts.map

package/src/select/index.ts

@@ -1,5 +1 @@
-export {
-  createSelectState,
-  type SelectStateProps,
-  type SelectState,
-} from './createSelectState';
+export { createSelectState, type SelectStateProps, type SelectState } from "./createSelectState";

package/src/selection/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Selection compatibility surface.
+ *
+ * Provides a React Stately-like module entrypoint for selection state while
+ * delegating to the existing Solid collection selection primitives.
+ */
+
+export {
+  createSelectionState,
+  type SelectionStateProps,
+  type SelectionState,
+} from "../collections/createSelectionState";
+
+export type {
+  Key,
+  Selection,
+  SelectionMode,
+  SelectionBehavior,
+  DisabledBehavior,
+  FocusStrategy,
+} from "../collections/types";
+
+export type MultipleSelectionStateProps =
+  import("../collections/createSelectionState").SelectionStateProps;
+export type MultipleSelectionState = import("../collections/createSelectionState").SelectionState;
+
+export { createSelectionState as useMultipleSelectionState } from "../collections/createSelectionState";

package/src/slider/createSliderState.d.ts

@@ -2,71 +2,71 @@
  * Creates state for a slider component.
  * Based on @react-stately/slider useSliderState.
  */
-import { type Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
-export type SliderOrientation = 'horizontal' | 'vertical';
+import { type Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
+export type SliderOrientation = "horizontal" | "vertical";
 export interface SliderStateProps {
-    /** The current value (controlled). */
-    value?: number;
-    /** The default value (uncontrolled). */
-    defaultValue?: number;
-    /** Handler called when the value changes. */
-    onChange?: (value: number) => void;
-    /** Handler called when the user stops dragging. */
-    onChangeEnd?: (value: number) => void;
-    /** The minimum value. */
-    minValue?: number;
-    /** The maximum value. */
-    maxValue?: number;
-    /** The step value. */
-    step?: number;
-    /** The orientation of the slider. */
-    orientation?: SliderOrientation;
-    /** Whether the slider is disabled. */
-    isDisabled?: boolean;
-    /** The locale for number formatting. */
-    locale?: string;
-    /** Number format options. */
-    formatOptions?: Intl.NumberFormatOptions;
+  /** The current value (controlled). */
+  value?: number;
+  /** The default value (uncontrolled). */
+  defaultValue?: number;
+  /** Handler called when the value changes. */
+  onChange?: (value: number) => void;
+  /** Handler called when the user stops dragging. */
+  onChangeEnd?: (value: number) => void;
+  /** The minimum value. */
+  minValue?: number;
+  /** The maximum value. */
+  maxValue?: number;
+  /** The step value. */
+  step?: number;
+  /** The orientation of the slider. */
+  orientation?: SliderOrientation;
+  /** Whether the slider is disabled. */
+  isDisabled?: boolean;
+  /** The locale for number formatting. */
+  locale?: string;
+  /** Number format options. */
+  formatOptions?: Intl.NumberFormatOptions;
 }
 export interface SliderState {
-    /** The current value. */
-    value: Accessor<number>;
-    /** Sets the value. */
-    setValue: (value: number) => void;
-    /** Sets the value by percent (0-1). */
-    setValuePercent: (percent: number) => void;
-    /** Gets the value as a percent (0-1). */
-    getValuePercent: Accessor<number>;
-    /** Gets the formatted value string. */
-    getFormattedValue: Accessor<string>;
-    /** Whether the thumb is being dragged. */
-    isDragging: Accessor<boolean>;
-    /** Sets the dragging state. */
-    setDragging: (dragging: boolean) => void;
-    /** Whether the slider is focused. */
-    isFocused: Accessor<boolean>;
-    /** Sets the focused state. */
-    setFocused: (focused: boolean) => void;
-    /** Increments the value by step. */
-    increment: (stepMultiplier?: number) => void;
-    /** Decrements the value by step. */
-    decrement: (stepMultiplier?: number) => void;
-    /** The minimum value. */
-    minValue: number;
-    /** The maximum value. */
-    maxValue: number;
-    /** The step value. */
-    step: number;
-    /** The page step (larger step for Page Up/Down). */
-    pageStep: number;
-    /** The orientation. */
-    orientation: SliderOrientation;
-    /** Whether the slider is disabled. */
-    isDisabled: boolean;
+  /** The current value. */
+  value: Accessor<number>;
+  /** Sets the value. */
+  setValue: (value: number) => void;
+  /** Sets the value by percent (0-1). */
+  setValuePercent: (percent: number) => void;
+  /** Gets the value as a percent (0-1). */
+  getValuePercent: Accessor<number>;
+  /** Gets the formatted value string. */
+  getFormattedValue: Accessor<string>;
+  /** Whether the thumb is being dragged. */
+  isDragging: Accessor<boolean>;
+  /** Sets the dragging state. */
+  setDragging: (dragging: boolean) => void;
+  /** Whether the slider is focused. */
+  isFocused: Accessor<boolean>;
+  /** Sets the focused state. */
+  setFocused: (focused: boolean) => void;
+  /** Increments the value by step. */
+  increment: (stepMultiplier?: number) => void;
+  /** Decrements the value by step. */
+  decrement: (stepMultiplier?: number) => void;
+  /** The minimum value. */
+  minValue: number;
+  /** The maximum value. */
+  maxValue: number;
+  /** The step value. */
+  step: number;
+  /** The page step (larger step for Page Up/Down). */
+  pageStep: number;
+  /** The orientation. */
+  orientation: SliderOrientation;
+  /** Whether the slider is disabled. */
+  isDisabled: boolean;
 }
 /**
  * Provides state management for a slider component.
  */
 export declare function createSliderState(props: MaybeAccessor<SliderStateProps>): SliderState;
-//# sourceMappingURL=createSliderState.d.ts.map
+//# sourceMappingURL=createSliderState.d.ts.map