@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/selection/createMultipleSelectionState.ts

@@ -0,0 +1,247 @@
+/**
+ * Raw multiple-selection + focus state for a collection.
+ *
+ * The lower of the two selection layers ported from upstream
+ * (`@react-stately/selection`'s `useMultipleSelectionState`): it owns the
+ * selected keys, focus, selection behavior, and disabled keys, but is NOT
+ * collection-aware. The collection-aware operations (toggle, extend, select
+ * all, range, etc.) live in {@link SelectionManager}, which is built on top of
+ * this state.
+ *
+ * Based on @react-stately/selection.
+ */
+
+import { createSignal, createMemo, createComputed, untrack, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
+import type { SelectionStateProps } from "../collections/createSelectionState";
+import type {
+  DisabledBehavior,
+  FocusStrategy,
+  Key,
+  Selection,
+  SelectionBehavior,
+  SelectionMode,
+} from "../collections/types";
+import { Selection as SelectionClass } from "./Selection";
+
+/**
+ * The raw state consumed by {@link SelectionManager}. Mirrors upstream's
+ * `MultipleSelectionState`: property reads (not Solid accessors) so the manager
+ * can read `state.selectionMode` etc. exactly as upstream does — the getters
+ * read the underlying signals, so reads inside reactive scopes still track.
+ */
+export interface MultipleSelectionState {
+  /** The type of selection that is allowed in the collection. */
+  readonly selectionMode: SelectionMode;
+  /** The selection behavior for the collection. */
+  readonly selectionBehavior: SelectionBehavior;
+  /** Sets the selection behavior for the collection. */
+  setSelectionBehavior(selectionBehavior: SelectionBehavior): void;
+  /** Whether the collection allows empty selection. */
+  readonly disallowEmptySelection: boolean;
+  /** Whether the collection is currently focused. */
+  readonly isFocused: boolean;
+  /** Sets whether the collection is focused. */
+  setFocused(isFocused: boolean): void;
+  /** The current focused key in the collection. */
+  readonly focusedKey: Key | null;
+  /** Whether the first or last child of the focused key should receive focus. */
+  readonly childFocusStrategy: FocusStrategy | null;
+  /** Sets the focused key, and optionally, whether the first or last child of that key should receive focus. */
+  setFocusedKey(key: Key | null, childFocusStrategy?: FocusStrategy): void;
+  /** The currently selected keys in the collection. */
+  readonly selectedKeys: Selection;
+  /** The last selection payload emitted through onSelectionChange. @internal */
+  readonly lastSelectionEvent: Selection | null;
+  /** Sets the selected keys in the collection. */
+  setSelectedKeys(keys: Selection): void;
+  /** Re-emits a selection payload without recomputing or mutating selection. @internal */
+  emitDuplicateSelectionEvent(keys?: Selection): void;
+  /** The currently disabled keys in the collection. */
+  readonly disabledKeys: Set<Key>;
+  /** Whether `disabledKeys` applies to all interactions, or only selection. */
+  readonly disabledBehavior: DisabledBehavior;
+}
+
+function equalSets(setA: Set<Key>, setB: Set<Key>): boolean {
+  if (setA.size !== setB.size) {
+    return false;
+  }
+
+  for (const item of setA) {
+    if (!setB.has(item)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function convertSelection(
+  selection: "all" | Iterable<Key> | null | undefined,
+  defaultValue: Selection,
+): Selection;
+function convertSelection(
+  selection: "all" | Iterable<Key> | null | undefined,
+): Selection | undefined;
+function convertSelection(
+  selection: "all" | Iterable<Key> | null | undefined,
+  defaultValue?: Selection,
+): Selection | undefined {
+  if (!selection) {
+    return defaultValue;
+  }
+
+  return selection === "all" ? "all" : new SelectionClass(selection);
+}
+
+/**
+ * Manages raw state for multiple selection and focus in a collection.
+ */
+export function createMultipleSelectionState(
+  props: MaybeAccessor<SelectionStateProps> = {},
+): MultipleSelectionState {
+  const getProps = () => access(props);
+
+  // Focus is a plain signal in Solid; upstream needs a ref + state pair only
+  // because React requires both a synchronous read and a re-render trigger.
+  const [isFocused, setIsFocused] = createSignal(false);
+  const [focusedKey, setFocusedKeySignal] = createSignal<Key | null>(null);
+  const [childFocusStrategy, setChildFocusStrategy] = createSignal<FocusStrategy | null>(null);
+
+  const defaultSelectedKeys = convertSelection(
+    getProps().defaultSelectedKeys,
+    new SelectionClass(),
+  );
+  const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] =
+    createSignal<Selection>(defaultSelectedKeys);
+
+  const selectedKeys = createMemo<Selection>(() => {
+    const p = getProps();
+    if (p.selectedKeys !== undefined) {
+      return convertSelection(p.selectedKeys, new SelectionClass());
+    }
+    return uncontrolledSelectedKeys();
+  });
+
+  // Selection behavior is seeded from the prop but kept in internal state so
+  // that `setSelectionBehavior` (e.g. the long-press-to-select touch flow) can
+  // override it. Two reactive rules mirror upstream's render-time logic.
+  const selectionBehaviorProp = (): SelectionBehavior => getProps().selectionBehavior ?? "toggle";
+
+  const [selectionBehavior, setSelectionBehaviorState] =
+    createSignal<SelectionBehavior>(selectionBehaviorProp());
+
+  // If the selectionBehavior prop is 'replace' but the current state is 'toggle'
+  // (e.g. due to a long press to enter selection mode on touch) and the
+  // selection becomes empty, reset the behavior back to 'replace'.
+  createComputed(() => {
+    const keys = selectedKeys();
+    if (
+      selectionBehaviorProp() === "replace" &&
+      untrack(selectionBehavior) === "toggle" &&
+      typeof keys === "object" &&
+      keys.size === 0
+    ) {
+      setSelectionBehaviorState("replace");
+    }
+  });
+
+  // If the selectionBehavior prop changes, sync it into state.
+  let lastSelectionBehavior = selectionBehaviorProp();
+  createComputed(() => {
+    const prop = selectionBehaviorProp();
+    if (prop !== lastSelectionBehavior) {
+      setSelectionBehaviorState(prop);
+      lastSelectionBehavior = prop;
+    }
+  });
+
+  const disabledKeys = createMemo<Set<Key>>(() => {
+    const keys = getProps().disabledKeys;
+    return keys ? new Set<Key>(keys) : new Set<Key>();
+  });
+
+  let lastSelectionEvent: Selection | null = null;
+
+  const emitSelectionEvent = (keys: Selection) => {
+    lastSelectionEvent = keys;
+    getProps().onSelectionChange?.(keys);
+  };
+
+  const setSelectedKeys = (keys: Selection) => {
+    const p = getProps();
+    const current = selectedKeys();
+    const shouldUpdate =
+      p.allowDuplicateSelectionEvents ||
+      keys === "all" ||
+      current === "all" ||
+      !equalSets(keys, current);
+
+    if (!shouldUpdate) {
+      return;
+    }
+
+    // Uncontrolled: store internally. Controlled: only notify.
+    if (p.selectedKeys === undefined) {
+      setUncontrolledSelectedKeys(keys);
+    }
+    emitSelectionEvent(keys);
+  };
+
+  const emitDuplicateSelectionEvent = (keys?: Selection) => {
+    const eventKeys = keys ?? lastSelectionEvent;
+    if (eventKeys == null) {
+      return;
+    }
+    emitSelectionEvent(eventKeys);
+  };
+
+  return {
+    get selectionMode() {
+      return getProps().selectionMode ?? "none";
+    },
+    get selectionBehavior() {
+      return selectionBehavior();
+    },
+    setSelectionBehavior(behavior: SelectionBehavior) {
+      setSelectionBehaviorState(behavior);
+    },
+    get disallowEmptySelection() {
+      return getProps().disallowEmptySelection ?? false;
+    },
+    get isFocused() {
+      return isFocused();
+    },
+    setFocused(f: boolean) {
+      setIsFocused(f);
+    },
+    get focusedKey() {
+      return focusedKey();
+    },
+    get childFocusStrategy() {
+      return childFocusStrategy();
+    },
+    setFocusedKey(key: Key | null, strategy: FocusStrategy = "first") {
+      setFocusedKeySignal(key);
+      setChildFocusStrategy(strategy);
+    },
+    get selectedKeys() {
+      return selectedKeys();
+    },
+    get lastSelectionEvent() {
+      return lastSelectionEvent;
+    },
+    setSelectedKeys,
+    emitDuplicateSelectionEvent,
+    get disabledKeys() {
+      return disabledKeys();
+    },
+    get disabledBehavior() {
+      return getProps().disabledBehavior ?? "all";
+    },
+  };
+}
+
+// Re-export the accessor type for convenience where a reactive read is wanted.
+export type { Accessor };

package/src/selection/index.ts

@@ -9,7 +9,13 @@ export {
   createSelectionState,
   type SelectionStateProps,
   type SelectionState,
-} from '../collections/createSelectionState';
+} from "../collections/createSelectionState";
+
+export {
+  SelectionManager,
+  type SelectionManagerOptions,
+  type LayoutDelegate,
+} from "./SelectionManager";
 
 export type {
   Key,
@@ -18,11 +24,10 @@ export type {
   SelectionBehavior,
   DisabledBehavior,
   FocusStrategy,
-} from '../collections/types';
+} from "../collections/types";
 
-export type MultipleSelectionStateProps = import('../collections/createSelectionState').SelectionStateProps;
-export type MultipleSelectionState = import('../collections/createSelectionState').SelectionState;
+export type MultipleSelectionStateProps =
+  import("../collections/createSelectionState").SelectionStateProps;
+export type MultipleSelectionState = import("../collections/createSelectionState").SelectionState;
 
-export {
-  createSelectionState as useMultipleSelectionState,
-} from '../collections/createSelectionState';
+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

package/src/slider/createSliderState.ts

@@ -3,10 +3,10 @@
  * Based on @react-stately/slider useSliderState.
  */
 
-import { type Accessor, createSignal, createMemo } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
+import { type Accessor, createSignal, createMemo } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
 
-export type SliderOrientation = 'horizontal' | 'vertical';
+export type SliderOrientation = "horizontal" | "vertical";
 
 export interface SliderStateProps {
   /** The current value (controlled). */
@@ -87,7 +87,7 @@ function clamp(value: number, min: number, max: number): number {
 function snapToStep(value: number, min: number, max: number, step: number): number {
   const snapped = Math.round((value - min) / step) * step + min;
   // Handle floating point precision issues
-  const decimalPlaces = (step.toString().split('.')[1] || '').length;
+  const decimalPlaces = (step.toString().split(".")[1] || "").length;
   const rounded = parseFloat(snapped.toFixed(decimalPlaces));
   return clamp(rounded, min, max);
 }
@@ -95,27 +95,37 @@ function snapToStep(value: number, min: number, max: number, step: number): numb
 /**
  * Provides state management for a slider component.
  */
-export function createSliderState(
-  props: MaybeAccessor<SliderStateProps>
-): SliderState {
+export function createSliderState(props: MaybeAccessor<SliderStateProps>): SliderState {
   const getProps = () => access(props);
 
-  // Get static values with defaults
-  const minValue = getProps().minValue ?? DEFAULT_MIN;
-  const maxValue = getProps().maxValue ?? DEFAULT_MAX;
-  const step = getProps().step ?? DEFAULT_STEP;
-  const orientation = getProps().orientation ?? 'horizontal';
-  const isDisabled = getProps().isDisabled ?? false;
-
-  // Calculate page step (10% of range, snapped to step)
-  const pageStep = Math.max(step, snapToStep((maxValue - minValue) / 10, 0, maxValue - minValue, step));
+  const initialProps = getProps();
+  const initialMinValue = initialProps.minValue ?? DEFAULT_MIN;
+  const initialMaxValue = initialProps.maxValue ?? DEFAULT_MAX;
+  const initialStep = initialProps.step ?? DEFAULT_STEP;
+
+  const minValue = createMemo(() => getProps().minValue ?? DEFAULT_MIN);
+  const maxValue = createMemo(() => getProps().maxValue ?? DEFAULT_MAX);
+  const step = createMemo(() => getProps().step ?? DEFAULT_STEP);
+  const orientation = createMemo(() => getProps().orientation ?? "horizontal");
+  const isDisabled = createMemo(() => getProps().isDisabled ?? false);
+  const pageStep = createMemo(() =>
+    Math.max(
+      step(),
+      snapToStep((maxValue() - minValue()) / 10, 0, maxValue() - minValue(), step()),
+    ),
+  );
 
   // Controlled vs uncontrolled
   const isControlled = () => getProps().value !== undefined;
 
   // Internal signal for uncontrolled mode
   const [internalValue, setInternalValue] = createSignal(
-    snapToStep(getProps().defaultValue ?? minValue, minValue, maxValue, step)
+    snapToStep(
+      initialProps.defaultValue ?? initialMinValue,
+      initialMinValue,
+      initialMaxValue,
+      initialStep,
+    ),
   );
 
   // Dragging and focus state
@@ -125,13 +135,13 @@ export function createSliderState(
   // Current value accessor
   const value = createMemo(() => {
     const p = getProps();
-    const rawValue = isControlled() ? (p.value ?? minValue) : internalValue();
-    return snapToStep(rawValue, minValue, maxValue, step);
+    const rawValue = isControlled() ? (p.value ?? minValue()) : internalValue();
+    return snapToStep(rawValue, minValue(), maxValue(), step());
   });
 
   // Value as percent (0-1)
   const getValuePercent = createMemo(() => {
-    return (value() - minValue) / (maxValue - minValue);
+    return (value() - minValue()) / (maxValue() - minValue());
   });
 
   // Formatted value
@@ -143,10 +153,10 @@ export function createSliderState(
 
   // Set value function
   const setValue = (newValue: number) => {
-    if (isDisabled) return;
+    if (isDisabled()) return;
 
     const p = getProps();
-    const snappedValue = snapToStep(newValue, minValue, maxValue, step);
+    const snappedValue = snapToStep(newValue, minValue(), maxValue(), step());
 
     if (!isControlled()) {
       setInternalValue(snappedValue);
@@ -158,7 +168,7 @@ export function createSliderState(
   // Set value by percent
   const setValuePercent = (percent: number) => {
     const clampedPercent = clamp(percent, 0, 1);
-    const newValue = clampedPercent * (maxValue - minValue) + minValue;
+    const newValue = clampedPercent * (maxValue() - minValue()) + minValue();
     setValue(newValue);
   };
 
@@ -175,13 +185,13 @@ export function createSliderState(
 
   // Increment/decrement
   const increment = (stepMultiplier = 1) => {
-    if (isDisabled) return;
-    setValue(value() + step * stepMultiplier);
+    if (isDisabled()) return;
+    setValue(value() + step() * stepMultiplier);
   };
 
   const decrement = (stepMultiplier = 1) => {
-    if (isDisabled) return;
-    setValue(value() - step * stepMultiplier);
+    if (isDisabled()) return;
+    setValue(value() - step() * stepMultiplier);
   };
 
   // Set focused state
@@ -201,11 +211,23 @@ export function createSliderState(
     setFocused,
     increment,
     decrement,
-    minValue,
-    maxValue,
-    step,
-    pageStep,
-    orientation,
-    isDisabled,
+    get minValue() {
+      return minValue();
+    },
+    get maxValue() {
+      return maxValue();
+    },
+    get step() {
+      return step();
+    },
+    get pageStep() {
+      return pageStep();
+    },
+    get orientation() {
+      return orientation();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
   };
 }

package/src/slider/index.d.ts

@@ -1,3 +1,3 @@
-export { createSliderState } from './createSliderState';
-export type { SliderState, SliderStateProps, SliderOrientation, } from './createSliderState';
-//# sourceMappingURL=index.d.ts.map
+export { createSliderState } from "./createSliderState";
+export type { SliderState, SliderStateProps, SliderOrientation } from "./createSliderState";
+//# sourceMappingURL=index.d.ts.map

package/src/slider/index.ts

@@ -1,6 +1,2 @@
-export { createSliderState } from './createSliderState';
-export type {
-  SliderState,
-  SliderStateProps,
-  SliderOrientation,
-} from './createSliderState';
+export { createSliderState } from "./createSliderState";
+export type { SliderState, SliderStateProps, SliderOrientation } from "./createSliderState";

package/src/ssr/index.d.ts

@@ -25,4 +25,4 @@ export declare function createId(defaultId?: string): string;
  * This is useful for code that needs to run only in the browser.
  */
 export declare const canUseDOM: boolean;
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/src/ssr/index.ts

@@ -5,8 +5,8 @@
  * These utilities provide a consistent API matching React-Stately's patterns.
  */
 
-import { createUniqueId } from 'solid-js';
-import { isServer as _isServer } from 'solid-js/web';
+import { createUniqueId } from "solid-js";
+import { isServer as _isServer } from "solid-js/web";
 
 /**
  * Re-export isServer from solid-js/web for convenience.